Note: Unless otherwise specified, Flutter version and Dart versions are as follows:
- Flutter Version: 1.12.13 + hotfix.5
- Dart Version: 2.7.0
Stack
Stack components may be superimposed display subassembly, according to smoothly sequentially stacked on top of subassembly used as follows:
Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Container(
height: 170,
width: 170,
color: Colors.blue,
),
Container(
height: 140,
width: 140,
color: Colors.yellow,
)
],
)
Results are as follows:
Stack size is not targeted by the subassembly fit
decision parameter, the default value is StackFit.loose
expressed subassemblies decide for themselves, StackFit.expand
represent as large as possible, used as follows:
Stack(
fit: StackFit.expand,
...
)
Stack default top-left corner of the sub-assembly is not positioned aligned by alignment
the parameter control is used as follows:
Stack(
alignment: Alignment.center,
...
)
Results are as follows:
There is no notice fit
and alignment
sub-assemblies are not positioned parameter control, and that what is called the sub-assembly component positioning? Positioned wrapped subassembly using subassembly is positioned, is used as follows:
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 10,
right: 10,
bottom: 10,
top: 10,
child: Container(
color: Colors.green,
),
)
],
)
Positioned component may specify a distance from each side Stack effect is as follows:
If sub-assemblies exceed Stack border by the overflow
control, the default is cut, use the following settings are always displayed:
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 100,
top: 100,
height: 150,
width: 150,
child: Container(
color: Colors.green,
),
)
],
)
Results are as follows:
IndexedStack
IndexedStack is a subclass of Stack, Stack is superimposed display of all sub-components, and IndexedStack display only the specified sub-components, is used as follows:
IndexedStack(
index: _index,
children: <Widget>[
Center(
child: Container(
height: 300,
width: 300,
color: Colors.red,
alignment: Alignment.center,
child: Icon(
Icons.fastfood,
size: 60,
color: Colors.blue,
),
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.green,
alignment: Alignment.center,
child: Icon(
Icons.cake,
size: 60,
color: Colors.blue,
),
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.yellow,
alignment: Alignment.center,
child: Icon(
Icons.local_cafe,
size: 60,
color: Colors.blue,
),
),
),
],
)
By clicking on the button to update the _index
value of the code is as follows:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.fastfood),
onPressed: () {
setState(() {
_index = 0;
});
},
),
IconButton(
icon: Icon(Icons.cake),
onPressed: () {
setState(() {
_index = 1;
});
},
),
IconButton(
icon: Icon(Icons.local_cafe),
onPressed: () {
setState(() {
_index = 2;
});
},
),
],
)
Results are as follows:
Positioned
Positioned for positioning subassembly Stack, Stack Positioned subassembly must be substantially used as follows:
Stack(
children: <Widget>[
Positioned(
left: 10,
right: 10,
top: 10,
bottom: 10,
child: Container(color: Colors.red),
),
],
)
Results are as follows:
Instructions:
- Providing
top
,bottom
,left
,right
four kinds of positioning properties, represent the vertical and horizontal distance. - Stack only be used for assembly.
left
、right
和width
3个参数只能设置其中2个,因为设置了其中2个,第三个已经确定了,同理top
、bottom
和height
也只能设置其中2个。
Positioned提供便捷的构建方式,比如Positioned.fromRect
、Positioned.fill
等,这些便捷的构建方式万变不离其宗,只不过换了一种方式设置top
、bottom
、left
、right
四种定位属性。
今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!