Flutter 之 Stack 、IndexedStack 和 Positioned 控件

Stack 系列为层叠的控件，类似 Android 的 FrameLayout 的作用。

Stack

new Center(
          child: new Stack(
            alignment: Alignment.center,
            textDirection: TextDirection.ltr,
            fit: StackFit.loose,
            overflow: Overflow.clip,
            children: [
              SizedBox(
                width: 100,
                height: 100,
                child: Card(
                  color:Colors.red,
                ),
              ),
              SizedBox(
                width: 90,
                height: 90,
                child: Card(
                  color: Colors.yellow,
                ),
              ),
              SizedBox(
                width: 80,
                height: 80,
                child: Card(
                  color: Colors.blue,
                ),
              ),
              SizedBox(
                width: 70,
                height: 70,
                child: Card(
                  color: Colors.black,
                ),
              ),
              SizedBox(
                width: 60,
                height: 60,
                child: Card(
                  color: Colors.orange,
                ),
              )
            ],
          ),
        )

属性

1. alignment

Alignment，对齐方式

2. textDirection

TextDirection，文字方向

3. fit:

StackFit.loose 尽量取最小宽度和高度
StackFit.expand 尽量占满 Stack 的宽度和高度
StackFit.passthrough 使用 Stack 父布局的宽度和高度的约束

4. overflow

Overflow.clip 超出 Stack 的宽度或者高度进行裁剪
Overflow.visible 超出 Stack 的宽度或者高度显示

image.png

IndexedStack

Stack 的子类，多了一个 index 属性。主要作用是指定哪层显示，其他层级不显示。fit 属性改为 sizing。

new IndexedStack(
            alignment: Alignment.center,
            textDirection: TextDirection.ltr,
            sizing: StackFit.loose,
            index:1,
            children: [
....
],
          ),

Positioned

Positioned ，通常结合 Stack 一起使用，相对 Stack 固定位置的布局，

Stack(
            alignment: Alignment.center,
            textDirection: TextDirection.ltr,
            fit: StackFit.loose,
            overflow: Overflow.clip,
            children: [
              Positioned(
                left:20,
                top:20,
                right:20,
                bottom:20,
                //left right,width不可以同时设置
                width: 100,
                //top bottom,height不可以同时设置
                height: 100,
                child: Text('Positioned'),
              )
            ],
          )