参考博客： 笔录Flutter（五）布局系列：Row、Column、Flex、Expanded 常用属性、使用 https://blog.csdn.net/huyongl1989/article/details/83745871 https://blog.csdn.net/gzx110304/article/details/101627286
Padding组件
因为Flutter中有很多Widget没有padding属性，所以我们可以使用Padding组件处理容器与子元素直接的间隔。
属性 | 说明 |
|---|---|
padding | padding值，EdgeInsets设置值 |
child | 子组件 |
Row水平布局组件
属性 | 说明 |
|---|---|
mainAxisAlignment | 主轴排序方式 |
crossAxisAlignment | 次轴排序方式 |
children | |
children | 子组件 |
Column垂直布局组件
属性 | 说明 |
|---|---|
mainAxisAlignment | 主轴排序方式 |
crossAxisAlignment | 次轴排序方式 |
children | 子组件 |
Row和Column默认会在主轴方向取最大，Row相对应LinearLayout的layout_width为match_parent，Column相对应LinearLayout的layout_height为match_parent。
属性图解
mainAxisAlignment图解
在讲解mainAxisAlignment时，我们一样树立这个一个概念：主轴和交叉轴。如果是Column，主轴是竖直轴，交叉轴是水平轴；如果是Row，主轴是水平轴，交叉轴是竖直轴。
接下来我们看一下mainAxisAligment的几个属性
enum MainAxisAlignment {
start,
end,
center,
spaceBetween,
spaceAround,
spaceEvenly,
}start:
end:
center:居中显示
spaceBetween:将空闲空间均匀地放在子’Widget’之间
spaceAround:将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2
spaceEvenly:将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
mainAxisSize图解
MainAxisSize的取值有两种：
max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；
从这里可以看出来这两个属性与我们接触过的Android的match_parent和wrap_content相似。
这里值得注意的是如果我们将
mainAxisSize设置为min,还设置了mainAxisAlignment可能会导致其效果展示不出来。 主轴方向默认取最大，可以设置为取最小
代码如下：
代码语言：javascript复制class WidgetTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),Container(
width: 100,
height: 100,
color: Colors.blue,
),Container(
width: 100,
height: 100,
color: Colors.yellow,
)
],
);
}
}效果如下，可以从图中看出，主轴并没有像我们想的那样出现间隙。
关于textDirection和verticalDirection我们不必死记硬背Row中是谁控制谁，在Column中是谁控制谁
我们只需要记住 textDirection就是用来控制水平方向的起始位置和排列方向 verticalDirection就是用来控制垂直方向的起始位置和排列方向
然后记住 MainAxisAlignment（主轴）就是与当前控件方向一致的轴 CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
Expanded 布局
属性 | 说明 |
|---|---|
flex | 弹性参数 |
children | 子组件 |
可以把Expanded布局中的flex看作Android中xml属性中的android:layout_weight这个属性
flex：如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间 接下来，为了熟练掌握进行demo的书写：大致效果为：
void main() => runApp(WidggetTestApp());
class WidggetTestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Row,Column学习'),
),
body: WidgetTest(),
),
);
}
}
class WidgetTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Container(
height: 200,
color: Colors.blue,
),
SizedBox(
height: 5,
),
Container(
height: 200,
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 200,
child: Image.network("http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png"
,fit: BoxFit.cover,
),
)
),
SizedBox(
width: 5,
),
Expanded(
flex: 1,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png' ,fit: BoxFit.cover,) ,
),
SizedBox(
height: 5,
),
Expanded(
flex: 1,
child: Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png' ,fit: BoxFit.cover,) ,
),
],
) ,
),
],
),
)
],
),
);
}
}
