Row是水平方向展示多个Widget集合的控件
Row
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,// 主轴对齐方式
MainAxisSize mainAxisSize = MainAxisSize.max,//主轴展示的区域
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//交叉轴对齐方式
TextDirection textDirection,//文本方向
List children = const [],//子容器
-
children:横向展示多个widget集合的属性
return Row(
children: [
Text('hello world'),
FlatButton(
color: Colors.red,
// textColor: Colors.amber,
onPressed: (){},
child: Text('click me'),
),
Container(
color: Colors.cyan,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 2),
child: Text('inside container'),
)
],
);
image.png
mainAxisAlignment:主轴(水平)对齐方式
-
start：左对齐
image.png -
end：右对齐
image.png-
center：居中
image.png
-
-
spaceBetween：两端对齐，控件之间的间隔都相等
image.png
-
spaceAround：每个控件两侧的间隔相等。中间控件的间距是控件与边框的间距大一倍
image.png
-
spaceEvenly：每个控件之间的间隔相等。
image.png
crossAxisAlignment:交叉轴对齐方式
-
start:交叉轴的起点对齐
image.png -
end:交叉轴的终点对齐
image.png -
center:交叉轴的中点对齐
image.png -
stretch:如果未设置高度会占满整个屏幕
image.png
-
baseline:项目文字对齐，需要设置textBaseline属性一起使用
image.png
mainAxisSize:主轴展示区域大小
以横向多个控件为例说明
-
max:主轴方向占满屏幕
image.png
-
'min`：子控件的子控件宽度大小之和,子控件会紧挨着布局
image.png
Column是垂直方向展示多个Widget集合的控件
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List children = const [],
Column的属性和Row的属性一致。区别在于，Column的主轴是垂直方向，交叉轴在水平方向，Column的布局方向是纵向的，可以类比Row理解各个属性。
实现九宫格
Row横向添加3个格子，在使用Column在纵向重复添加3次
注：读者可以自己使用另外一种(先纵向，在横向)实现9宫格，此文章不在赘述。
// 9宫格
class NineGrid extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
RowItem(),
RowItem(),
RowItem(),
],
);
}
}
class RowItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 100,
height: 100,
child: RaisedButton(
color: Colors.cyan,
onPressed: (){},
child: Text('icons1'),
),
),
Container(
width: 100,
height: 100,
child: RaisedButton(
onPressed: (){},
color: Colors.red,
child: Text('icons2'),
),
),
Container(
width: 100,
height: 100,
child: RaisedButton(
color: Colors.amber,
onPressed: (){},
child: Text('icons3'),
),
),
],
);
}
}
具体详情请查看demo