文章已同步至掘金:https://juejin.cn/post/6844903956368326669
欢迎访问😃,有任何问题都可留言评论哦~
Flutter 中的Row
和Column
被称之为线性布局,所谓线性布局,即指沿水平或垂直方向排布子组件。
轴的概念
对于线性布局,有主轴和纵轴之分。
如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;
如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。
在线性布局中,有两个定义对齐方式的枚举类MainAxisAlignment
和CrossAxisAlignment
,分别代表主轴对齐和纵轴对齐。
Row
Row可以在水平方向排列其子组件
构造函数如下:
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
属性解释
textDirection
表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认从左往右
mainAxisSize
表示Row在主轴(水平)方向占用的空间,
默认是MainAxisSize.max
,表示尽可能多的占用水平方向的空间
而MainAxisSize.min
表示尽可能少的占用水平空间
mainAxisAlignment
(相当于H5中Flex布局的处理项目的富余空间 — Flex 布局教程)
表示子组件在Row所占用的水平空间内对齐方式(只有当mainAxisSize
的值为MainAxisSize.max
时,此属性才有意义)
-
MainAxisAlignment.start
表示文本内容沿textDirection
的初始方向对齐,(如textDirection
取值为TextDirection.ltr
时,则表示左对齐,textDirection
取值为TextDirection.rtl
时表示从右对齐。) -
MainAxisAlignment.end
和MainAxisAlignment.start
正好相反; -
MainAxisAlignment.center
表示文本内容居中对齐 -
MainAxisAlignment.spaceAround
表示每个组件两边的富余空间相等 -
MainAxisAlignment.spaceBetween
表示将富裕空间平分为(内容-1)段 -
MainAxisAlignment.spaceEvenly
表示将富裕空间平分为(内容+1)段,(经常使用)
代码示例:
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
Divider(), //表示一条横线
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
),
],
),
运行效果:
verticalDirection
表示Row纵轴(垂直)的对齐方向,默认是VerticalDirection.down
,表示从上到下。
crossAxisAlignment
表示子组件在纵轴方向的对齐方式,Row的高度等于子组件中最高的子元素高度,它的取值和MainAxisAlignment
一样(包含start
、end
、 center
三个值),
不同的是crossAxisAlignment
的参考系是verticalDirection
,
即verticalDirection
值为VerticalDirection.down
时crossAxisAlignment.start
指顶部对齐,
verticalDirection
值为VerticalDirection.up
时,crossAxisAlignment.start
指底部对齐;
而crossAxisAlignment.end
和crossAxisAlignment.start
正好相反;
children
子组件数组
Column
Column
可以在垂直方向排列其子组件。
参数和Row一样,不同的是布局方向为垂直,主轴纵轴正好相反。
构造函数如下:
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
注:Row
和Column
都只会在主轴方向占用尽可能大的空间,而纵轴的长度则取决于他们最大子元素的长度
如果我们想让文本控件在整个手机屏幕中间对齐,那么我们有两种方法:
- 将
Column
的宽度指定为屏幕宽度,我们可以通过ConstrainedBox
或SizedBox
来强制更改宽度限制,
例如:
ConstrainedBox(
constraints: BoxConstraints(minWidth: double.infinity),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text("Hello"),
Text("World"),
],
),
);
将minWidth
设为double.infinity
,可以使宽度占用尽可能多的空间。
- 使用
Center
Widget;
控件嵌套
如果Row
里面嵌套Row
,或者Column
里面再嵌套Column
,
那么只有对最外面的Row
或Column
会占用尽可能大的空间,里面Row
或Column
所占用的空间为实际大小,
示例:
Container(
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max, //有效,外层Colum高度为整个屏幕
children: <Widget>[
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.max,//无效,内层Colum高度为实际高度
children: <Widget>[
Text("hello world "),
Text("I am Jack "),
],
),
)
],
),
),
);
如果要让里面的Column
占满外部Column
,可以使用Expanded
组件:
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
children: <Widget>[
Text("hello world "),
Text("I am Jack "),
],
),
),
)
关于Expanded
的使用,请参考文章:Flutter 布局控件篇–>Flex、Expanded
评论区