注意:无特殊说明,颤振版本及达特版本如下:> - 颤振版本:1.12.13 + hotfix.5 > - 飞镖版本:2.7.0
堆栈
Stack组件可以将子组件叠加显示,根据子组件的顺利依次向上叠加,用法如下:
Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Container(
height: 170,
width: 170,
color: Colors.blue,
),
Container(
height: 140,
宽度: 140 ,
颜色:颜色。黄色,)] ,)```
效果如下:
![](http://img3.sycdn.imooc.com/5e6245060001a2b707860464.jpg)
堆栈未定位的子组件大小由'配合'参数决定,默认值是` StackFit.loose `,表示子组件自己决定,` StackFit.expand `表示尽可能的大,用法如下:
Stack(
fit:StackFit.expand,
…
)```
堆栈未定位的子组件的默认左上角对齐,通过对准
参数控制,用法如下:
Stack(
alignment: Alignment.center,
...
)
效果如下:
有没有注意到fit
和alignment
参数控制的都是未定位的子组件,那某种的组件叫做定位的子组件?使用定位包装的子组件就是定位的子组件,用法如下:
飞镖堆( 对齐:对齐。中心, 子代:<小部件> [ 容器( 高度:200 , 宽度:200 , 颜色:颜色。红色,),位置( 左:10 , 右:10 , 底:10 , 顶部:10
,
孩子: 容器(
颜色:颜色,绿色,),)] ,)`’’
已定位组件可以指定间距堆栈各边的距离,效果如下:
如果子组件超过堆栈边界由溢出
控制,默认是裁剪,下面设置总是显示的用法:
飞镖栈( 溢出:溢出。可见, 孩子:<小部件> [ 容器( 高度:200 , 宽度:200 , 颜色:颜色。红色,),位置( 左:100 , 上:100 , 高度:150 , 宽度:150
,
孩子: 容器(
颜色:颜色,绿色,),)] ,)`’’
效果如下:
IndexedStack
IndexedStack是Stack的子类,Stack是将所有的子组件重叠显示,而IndexedStack只显示指定的子组件,用法如下:
dart IndexedStack ( 索引: _index , 子代:< Widget > [ 中心( 子代:容器( 高度:300 , 宽度:300 , 颜色:颜色。红色, 对齐:对齐。中心, 子代:图标( 图标。
快餐,
大小: 60 ,
颜色:颜色。蓝色(),),),中心( 子:容器( 高度:300 , 宽度:300 , 颜色:颜色。绿色, 对齐:对齐。中心, 子:图标
(
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,
),
),
),
],
)
通过点击按钮更新`_index`值,代码如下:
```dart
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;
});
},
),
],
)
效果如下:
定位
Positioned用于定位Stack子组件,Positioned必须是Stack的子组件,基本用法如下:
镖镖(儿童:<微件> [定位(左:10,右:10,末端:10,底部:10,子:容器(颜色:颜色红色),),],)))
效果如下:
相关说明:
- 提供
顶
,下
,左
,右
位置定位属性,分别表示距离上下左右的距离.-只能用于小型组件中.-左
,右
和宽度
3个参数只能设置其中2个,因为设置了其中2个,第三个已经确定了,同理顶
,底部
和高度
也只能设置其中2个。
定位提供便捷的构建方式,比如Positioned.fromRect
,Positioned.fill
等,这些便捷的构建方式万变不离其宗,只不过换了一种方式设置顶
,下
,左
,右
局部定位属性。
更多相关阅读:
- [Flutter系列文章总览](https://blog.csdn.net/mengks1987/article/details/84868953)-[全网最详细的文章Flutter尺寸限制类容器总结](https:////博客。csdn 。/净/ mengks1987 /文章/详细信息/ 104683649)-[Flutter DataTable看这文章就够了](https://blog.csdn.net/mengks1987/article/details/104661591)-[Flutter Widgets之PageView] (https:////////blog.csdn.net/mengks1987/article/details/104570500)