0%

Flutter Expanded VS Flexible

在Flutter中,当需要填充容器(Row, Column, or Flex)剩余空间的时候,可以使用ExpandedFlexible,本文对这二者的差异做一分析。

分析

Expanded 比较容易理解,他会强制child改变大小,占据容器的剩余空间,如果有多个Expanded的话,会按照他们的flex占比来分配每个child可以占据的空间大小。

Flexible 稍微特殊一些,有时候看起来似乎他的child占据的大小既不全是父布局的剩余空间,也不全是刚刚包裹child内容的大小。

让我们看一下Flexible的源码:

1
2
3
4
5
6
const Flexible({
Key? key,
this.flex = 1,
this.fit = FlexFit.loose,
required Widget child,
}) : super(key: key, child: child);

可以看到,默认情况下他使用的fit模式是FlexFit.loose,查阅文档定义可知:

1
2
3
FlexFit.loose:The child can be at most as large as the available space (but is allowed to be smaller).

FlexFit.tight:The child is forced to fill the available space.

也就是说,默认情况下,Flexible的child最大可以是父容器分配给Flexible的大小(假设为MaxSzie)。

但是,如果child的大小比这个MaxSzie要小的话,那么允许child按照自己的大小来显示。

而如果FlexiblefitFlexFit.tight的话,就会强制child大小为MaxSzie,效果和Expanded一致,实际上Expanded就是FlexFit.tight模式的Flexible

1
2
3
4
5
6
7
8
9
10
class Expanded extends Flexible {
/// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space along the flex widget's
/// main axis.
const Expanded({
Key? key,
int flex = 1,
required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

对于上述的结论,我们可以从下面的代码中得到证实:

Untitled

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
main() => runApp(MaterialApp(home: BodyWidget()));

class BodyWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _BodyState();
}
}

class _BodyState extends State<BodyWidget> {
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
final int count = 100;

return Material(
child: Container(
color: Colors.grey.shade200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.teal,
child: Text(
'Container Text ',
)),
Flexible(
child: Container(
color: Colors.blue,
child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
),
Flexible(
child: Container(
color: Colors.yellow, child: Text('Flexible Text.')),
),
Flexible(
child: Container(
color: Colors.lightGreen, child: Text('Flexible.')),
),
],
),
SizedBox(
height: 80,
width: width,
child: ListView.builder(
itemBuilder: (context, index) {
return SizedBox(
width: width / count,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
width: 1,
height: index % 5 == 0 ? 30 : 20,
color: Colors.purple,
),
if (index % 5 == 0)
Flexible(
child: Text(
'$index',
style: const TextStyle(fontSize: 5),
),
),
],
),
);
},
itemCount: count,
scrollDirection: Axis.horizontal,
),
),
],
),
),
);
}
}

总结

ExpandedFlexible默认情况下都会按照flex占据父容器剩余的可用空间,但是不同的是,Expanded会强制child改变大小为父容器分配的大小,而Flexible则会告诉child,最大只能是父容器分配的大小,要是child想要小一些的话,也可以按照child的大小显示

如果改变FlexiblefitFlexFit.tight的话,ExpandedFlexible没有差别。