Column组件即垂直布局控件,能够将子组件垂直排列。其实Column组件里边的大部分属性都与Row组件一样。 1.如果Row里面嵌套Row,或者Column里面再嵌套Column,那么只有对最外面的Row或Column会占用尽可能大的空间,里面Row或Column所占用的空间为实际大小,如果要让里面的Colum或Row占满外部Colum或Row,可以使用Expanded widget 弹性布局允许子widget按照一定比例来分配父容器空间,弹性布局的概念在其UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。 Flex可以沿着水平或垂直方向排列子widget,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方一定可以使用Row或Column。Flex本身功能是很强大的,它也可以和Expanded配合实现弹性布局,接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)。 可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。 flex为弹性系数,如果为0或null,则child是没有弹性的,即不会被扩伸占用的空间。如果大于0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间.Column
/**
* 垂直布局
*/
class ColumnWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed: () {}, color: Colors.red, child: Text('红色按钮')),
RaisedButton(
onPressed: () {},
color: Colors.orange,
child: Text('黄色大按钮'),
),
RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('粉色按钮'))
],
);
}
}
实际使用
2.如果使用Column发现超范围,可用SingleChildScrollView包裹,scrollDirection属性设置滑动方向
3.使用Column嵌套ListView/GridView的时候,会报异常信息【Viewports expand in the scrolling direction to fill their container...】,这种情况flutter已给出解决办法,将ListView/GridView的 shrinkWrap属性设为true
4.有的时候修改Row/Column的verticalDirection会得到很好的效果,比如需要页面在底部需要几个按键,也可以用Stack来布局,但是相对麻烦,而且有时还需要知道控件的大小,没有verticalDirection方便。弹性布局
Flex
Flex({
...
@required this.direction, //弹性布局的方向, Row默认为水平方向,Column默认为垂直方向
List<Widget> children = const <Widget>[],
})
Expanded
const Expanded({
int flex = 1,
@required Widget child,
})