Flutter开发之——多组件布局容器-Row

一 概述

  • Row:英文意思为,Flutter中是指行布局容器
  • Row是多组件布局容器,子控件的排列方式为水平方向

二 Row

2.1 构造方法

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

2.2 属性说明

属性 说明 取值
mainAxisAlignment 主轴对齐方式 MainAxisAlignment对象
mainAxisSize 主轴尺寸 MainAxisSize对象
crossAxisAlignment 交叉轴对齐方式 CrossAxisAlignment对象
textDirection 水平布局方向 TextDirection对象
verticalDirection 垂直布局方向 VerticalDirection对象

MainAxisAlignment取值

取值 说明
start 左对齐
end 右对齐
center 居中对齐
spaceBetween 均匀分布对齐(顶格)
spaceAround 间隔分布对齐(开头和结尾间隔是子控件间隔的一半)
spaceEvenly 间隔分布对齐(所有间隔都一样)

MainAxisSize

取值 说明
min 最小尺寸
max 最大尺寸

crossAxisAlignment

取值 说明
start 上对齐
end 下对齐
center 居中对齐
baseline 基线对齐
stretch 拉伸充满父容器

textDirection

取值 说明
ltr 从左到右
rtl 从右到左

verticalDirection

取值 说明
up 从上往下
down 从下往上

三 示例

3.1 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Row(
mainAxisSize: MainAxisSize.max,
textDirection: TextDirection.rtl,
verticalDirection: VerticalDirection.up,
textBaseline: TextBaseline.alphabetic,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 50,
width: 80,
color: Colors.red,
child: Text("Text"),
),
Container(
height: 60,
width: 90,
color: Colors.green,
),
Container(
height: 70,
width: 100,
color: Colors.blue,
),
],
)

3.2 效果图