Flutter 基础布局之Row

Row意为水平布局，可以使其包含的子控件按照水平方向排列
代码如下：

1. class _TestState extends State<Test> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return MaterialApp(
5.       home: Scaffold(
6.         body: Container(
7.           width: MediaQuery.of(context).size.width,
8.           height: MediaQuery.of(context).size.height,
9.           color: Colors.lightGreen,
10.           child: Row(
11.             children: [
12.               Container(
13.                 width: 100,
14.                 height: 120,
15.                 color: Colors.red,
16.               ),
17.               Container(
18.                 width: 100,
19.                 height: 150,
20.                 color: Colors.yellow,
21.               ),
22.               Container(
23.                 width: 100,
24.                 height: 180,
25.                 color: Colors.blue,
26.               ),
27.             ],
28.           ),
29.         ),
30.       ),
31.     );
32.   }
33. }

复制代码

效果如下：


如上图所示，我们可以看到三个控件水平的排列在屏幕中间

----------------分割线---------------

这种基本的使用大多数情况都不能满足需求，让我们来看下Row拥有的几个参数

1. Row({
2.     Key? key,
3.     MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
4.     MainAxisSize mainAxisSize = MainAxisSize.max,
5.     CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
6.     TextDirection? textDirection,
7.     VerticalDirection verticalDirection = VerticalDirection.down,
8.     TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
9.     List<Widget> children = const <Widget>[],
10.   })

复制代码

MainAxisAlignment:主轴对齐方式，就是Row中子控件在水平方向的对齐方式(PS:对于Row来说主轴就是水平方向，而对于Column来说主轴就是垂直方向)
mainAxisAlignment有以下几个可选值
MainAxisAlignment.start：靠左排列(从Row的结构体可以看出这是默认的值)
MainAxisAlignment.end：靠右排列。代码如下：

1. class _TestState extends State<Test> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return MaterialApp(
5.       home: Scaffold(
6.         body: Container(
7.           width: MediaQuery.of(context).size.width,
8.           height: MediaQuery.of(context).size.height,
9.           color: Colors.lightGreen,
10.           child: Row(
11.             mainAxisAlignment:MainAxisAlignment.end,
12.             children: [
13.               Container(
14.                 width: 100,
15.                 height: 120,
16.                 color: Colors.red,
17.               ),
18.               Container(
19.                 width: 100,
20.                 height: 150,
21.                 color: Colors.yellow,
22.               ),
23.               Container(
24.                 width: 100,
25.                 height: 180,
26.                 color: Colors.blue,
27.               ),
28.             ],
29.           ),
30.         ),
31.       ),
32.     );
33.   }
34. }

复制代码

效果如下：


MainAxisAlignment.center：居中排列。
代码与上面差不多，就不贴了。效果如下：



MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等。效果如下：



MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。效果如下：



MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是均分水平空间。效果如下：



CrossAxisAlignment:交叉轴对齐方式，就是Row中子控件在垂直方向的对齐方式，所谓的交叉轴就是与主轴垂直的方向(PS：对于Row来说，它的交叉轴就是垂直方向，对于Column来说，它的交叉轴就是水平方向)

crossAxisAlignment有以下几个可选值

CrossAxisAlignment.center：子组件在 Row 中居中对齐(从Row的结构体可以看出这是默认的值)，所以图一里子控件会在垂直方向居中。

CrossAxisAlignment.start：子组件在 Row 顶部对齐，效果如下



CrossAxisAlignment.end：子组件在 Row 底部对齐。



CrossAxisAlignment.stretch：交叉轴拉伸填充满父布局。
效果如下：


CrossAxisAlignment.baseline：基于基线对齐，不常用，意义不明...

MainAxisSize:主轴大小适配，有两个值可选
MainAxisSize.min：宽度与子控件保持一致
代码如下

1. class _TestState extends State<Test> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return MaterialApp(
5.       home: Scaffold(
6.         body: Container(
7.           width: MediaQuery.of(context).size.width,
8.           height: MediaQuery.of(context).size.height,
9.           alignment: Alignment.center,
10.           color: Colors.lightGreen,
11.           child: Container(
12.             color: Colors.blueGrey,
13.             child: Row(
14.               mainAxisSize: MainAxisSize.min,
15.               children: [
16.                 Container(
17.                   width: 100,
18.                   height: 120,
19.                   color: Colors.red,
20.                 ),
21.                 Container(
22.                   width: 100,
23.                   height: 150,
24.                   color: Colors.yellow,
25.                 ),
26.                 Container(
27.                   width: 100,
28.                   height: 180,
29.                   color: Colors.blue,
30.                 ),
31.               ],
32.             ),
33.           ),
34.         ),
35.       ),
36.     );
37.   }
38. }

复制代码

效果如下：


MainAxisSize.max：宽度铺满主轴方向(这个是默认值)
效果如下：


TextDirection:子组件水平方向排列顺序（PS:从上面可以看出，我们Row里的子控件默认是从左往右排序的，如果设置了这个参数，则可以改变默认的排序方向）

可选值有：
 --TextDirection.ltr：从左往右开始排列（这个是默认的方向）
 --TextDirection.rtl：从右往左开始排列

代码如下：

1. class _TestState extends State<Test> {
2.   @override
3.   Widget build(BuildContext context) {
4.     return MaterialApp(
5.       home: Scaffold(
6.         body: Container(
7.           width: MediaQuery.of(context).size.width,
8.           height: MediaQuery.of(context).size.height,
9.           color: Colors.lightGreen,
10.           child: Row(
11.             textDirection: TextDirection.rtl,
12.             children: [
13.               Container(
14.                 width: 100,
15.                 height: 120,
16.                 color: Colors.red,
17.               ),
18.               Container(
19.                 width: 100,
20.                 height: 150,
21.                 color: Colors.yellow,
22.               ),
23.               Container(
24.                 width: 100,
25.                 height: 180,
26.                 color: Colors.blue,
27.               ),
28.             ],
29.           ),
30.         ),
31.       ),
32.     );
33.   }
34. }

复制代码

效果如下：

从上图我们看到，原本我们代码里排在第一个红色控件，此时排在了右边第一个

VerticalDirection:子组件垂直方向排列顺序，这个不关Row的事，我们将会在Column里介绍这个属性..

介绍完毕~
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！