Flutter 控件布局
原创
Spacer
初始状态
- 设置三个按钮,顺序排列
- 在AB两个按钮之间加一行
Spacer() - 在BC两个按钮之间也加一行
Spacer()
总结
Spacer() 相当于弹簧的效果,使两个控件之间的距离达到最大值. (在页面不可滑动时才有效果)
Flex
Flex 是 Row和Column的父组件. Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。
Expanded
可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。
const Expanded({
int flex = 1,
@required Widget child,
})flex参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
以1:1:2:2的比例,排列A , 占位空白, B , C
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: RaisedButton(
color: Colors.yellow,
splashColor: Colors.green,
onPressed: () {},
child: Text("A"),
textColor: Color(0xffFfffff),
padding: EdgeInsets.all(8),
elevation: 5,
highlightColor: Color(0xffF88B0A),
),
),
Spacer(
//Spacer的功能是占用指定比例的空间
flex: 1,
),
Expanded(
flex: 2,
child: RaisedButton(
color: Colors.green,
splashColor: Colors.green,
onPressed: () {},
child: Text("B"),
textColor: Color(0xffFfffff),
padding: EdgeInsets.all(8),
elevation: 5,
highlightColor: Color(0xffF88B0A),
),
),
Expanded(
flex: 2,
child: RaisedButton(
color: Colors.blue,
splashColor: Colors.blue,
onPressed: () {},
child: Text("C"),
textColor: Color(0xffFfffff),
padding: EdgeInsets.all(8),
elevation: 5,
highlightColor: Color(0xffF88B0A),
),
),
],
),
),Flexible
Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。
Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，但是它与Expanded组件不同， 它不强制子组件填充可用空间 。
三个控件flex都是1, 左图第三个控件是Flexible, 右图第三个控件是Expanded (其他属性一模一样)
可以看出:
Row、Column、Flex会被Expanded撑开，充满主轴可用空间.
Flexible并不会强制子组件填充可用空间,子组件实际大小是多少,它就是多大.
特别注意
Expanded、Flexible只在Row、Column组件使用。
Expanded、Flexible在“Container、Padding、Stack”组件中会报错: The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type Fle
Padding
Padding可容纳一个子组件,添加自身内边距来限制孩子组件的占位,核心属性为padding.
Container(
color: Colors.red,
width: 200,
height: 150,
child: Padding(
padding: EdgeInsets.all(20),
child: RaisedButton(
color: Colors.blue,
splashColor: Colors.blue,
onPressed: () {},
child: Text("C"),
textColor: Color(0xffFfffff),
padding: EdgeInsets.all(8),
elevation: 5,
highlightColor: Color(0xffF88B0A),
),
),
),关于Padding和Expanded
- 对于有着固定间距的视觉元素，可以通过 Padding 对其进行包装.
- 对于大小伸缩可变的视觉元素，可以通过 Expanded 控件让其填充父容器的空白区域
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。