本节目标

  • expanded
  • flex

Flex 组件是 Row 和 Column 的父类,主要用于弹性布局,类似于 HTML 中的 Flex 弹性盒子布局,可以按照一定比例进行分类布局空间。

Flex 继承自 MultiChildRenderObjectWidget,Flex 也是多子元素的一个组件之一(内部可以包含多个子元素)。

Flex 一般和 Expanded 搭配使用,Expanded 组件从名字就可以看出它的特点,就是让子元素扩展占用 Flex 的剩余空间。

Expanded Flex

  • 构造函数

单独看 Flex 组件没有意义,因为一般直接用它的子类 Row 和 Column 来使用。而 Flex 主要是和 Expanded 搭配使用。我们再看下 Expanded 组件构造方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Flex({
Key key,
// 子元素排列方向:横向还是纵向
@required this.direction,
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.textBaseline,
List<Widget> children = const <Widget>[],
})

const Expanded({
Key key,
// 占用空间比重、权重
int flex = 1,
// 子元素
@required Widget child,
})

例子 Expanded

1
2
3
4
5
6
7
8
9
10
11
12
13
Row(
children: <Widget>[
Container(
width: 50,
color: Colors.cyan,
),
Expanded(
child: Container(
color: Colors.brown,
),
),
],
)

例子 Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.cyan,
),
),
Expanded(
flex: 4,
child: Container(
color: Colors.brown,
),
)
],
)

代码

https://github.com/ducafecat/flutter-learn/tree/master/flex_expanded_widget

参考


© 猫哥

https://ducafecat.tech