Flutter之Flex组件布局
在Flutter中,Flex组件是一种非常常见的布局组件,它是Row和Column的扩展,可以通过flex参数来控制子widget的空间。
以下是一些使用Flex布局的示例:
- 基本的Flex使用:
Flex(
direction: Axis.horizontal, // 水平方向
children: <Widget>[
Expanded(
flex: 1,
child: Container(color: Colors.red),
),
Expanded(
flex: 2,
child: Container(color: Colors.blue),
),
],
)
在这个例子中,我们创建了一个水平方向的Flex。第一个子widget占据屏幕宽度的1/3,第二个子widget占据屏幕宽度的2/3。
- 使用Flex的mainAxisAlignment和crossAxisAlignment属性:
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 子widget在主轴方向上均匀分布
crossAxisAlignment: CrossAxisAlignment.center, // 子widget在交叉轴方向上居中
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
],
)
在这个例子中,我们创建了一个水平方向的Flex,并设置了主轴方向(水平)和交叉轴方向(垂直)的对齐方式。
- 使用Flex的mainAxisSize属性:
Flex(
direction: Axis.horizontal,
mainAxisSize: MainAxisSize.min, // 主轴方向占用最小空间
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
],
)
在这个例子中,我们创建了一个水平方向的Flex,并设置了主轴方向(水平)的空间大小。
以上就是一些使用Flex布局的基本示例,Flex布局在Flutter中非常常见,也非常强大,可以根据需要灵活使用。
评论已关闭