继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

一篇带你看懂Flutter叠加组件Stack

老孟Flutter
关注TA
已关注
手记 47
粉丝 16
获赞 4

注意:无特殊说明,颤振版本及达特版本如下:> - 颤振版本: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,
  ...
)

效果如下:

有没有注意到fitalignment参数控制的都是未定位的子组件,那某种的组件叫做定位的子组件?使用定位包装的子组件就是定位的子组件,用法如下:

飞镖堆( 对齐:对齐。中心, 子代:<小部件> [ 容器( 高度: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.fromRectPositioned.fill等,这些便捷的构建方式万变不离其宗,只不过换了一种方式设置局部定位属性。

更多相关阅读:

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP