使用行(Row)水平排列widget
,使用列(Column)垂直排列widget
。在行或列中嵌套行或列实现复杂的布局。如下图所示:
此布局按行排列。该行包含两个子布局,左侧一列和右侧的图片
- 对于行(Row)来说,主轴是水平方向,横轴是垂直方向。对于列(Column)来说,主轴是垂直方向,横轴是水平方向
- 使用
mainAxisAlignment
和crossAxisAlignment
属性控制行或列对齐(使用
MainAxisAlignment
和CrossAxisAlignment
类中的常量)
如下图:3个图像都是100像素,屏幕宽度大于300像素,可以设置主轴对齐方式为spaceEvently
,它会在每个图像之前和之后分配空闲的水平空间
代码如下:
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Image.asset('images/pic1.jpg'),
如果要
widget
按比例占据空间大小,可以将widget
放到ExpandedWidget
中,ExpandedWidget
的flex
属性,用于确定widget
的弹性系数,默认为1
如下图:创建一个由3个widget
组成的行,其中中间widget
的宽度是其他两个widget
的两倍,将中间widget
的弹性系数设置为2
代码如下:class ExpandedState extends State<ExpandedS> { @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar(title: new Text('ExpandedTest')), body: new Center( child: new Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ new Expanded(child: new Image.asset('images/1.jpg')), new Expanded(child: new Image.asset('images/2.jpg'), flex: 2,), new Expanded(child: new Image.asset('images/3.jpg')) ], ), ), ); } }
- 默认情况下,行或列沿着其主轴会占用尽可能多的空间,如果要将widget聚集在一起,可以将
mainAxisSize
设置为MainAxisSize.min
如下图,将五角星挨个排列,而不是分散占成一行
上文参考https://flutterchina.club/tutorials/layout/#approach
注意
pubspec.yaml
文件中添加资源代码格式要正确
如下
下面设置是不正确的,图片不能显示