Flutter组件之定位
##定位方式一:
可以在所需组件外层包裹一个Container,利用alignment: FractionalOffset(x, y)进行定位
例子
Container(
padding: EdgeInsets.all(5.0),
alignment: FractionalOffset(0.5, 0.8),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.red,
Colors.orange,
Colors.yellow
],
),
),
child: Text(
"Foreground Text",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
##定位方式二:
利用 Positioned 组件进行定位
必选
child => Widget 所包含的组件(孩子)
可选
left => double 左边距离
top => double 顶部距离
right => double 右边距离
bottom => double 底部距离
width => double 宽度
height => double 高度
例子
Positioned(
left: 20.0,
top: 120.0,
child: new Text("今天今天今天今天今天今天今天"),
),
##定位方式三:
利用 Center 组件进行居中定位
必选
child => Widget 所包含的组件(孩子)
可选
widthFactor => double 组件宽度为孩子宽度的N倍
heightFactor => double 组件高度为孩子高度的N倍
例子
//该组件的宽度为100.0,高度为200.0
Center(
widthFactor: 1.0,
heightFactor: 2.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.lightGreenAccent,
),
),
原文链接:https://blog.csdn.net/qq_33488315/article/details/90794365