12、 Flutter Widgets 之 Stack,Positioned叠加组件

Stack/Positioned是用来做页面布局定位的组件，需要结合使用

 

Stack

children:一个数组，里面可放多个Widget
alignment:Alignment.topCenter//对齐方式，会对所有的子组件统一设置对齐，不灵活，一般不用

Positioned

child:一个子组件
left,top,right,bottom,width,heigh://设置这些值会改变子组件的大小，位置(相对于最外层组件)

Stack

---

Stack组件可以将子组件叠加显示，根据子组件的顺利依次向上叠加，用法如下：

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,
        ),
        ElevatedButton(onPressed: (){}, child: Text('这个视图按钮好'))
      ],
    )

 从效果可以看出视图一次从左上方开始堆叠，子视图最下方的视图展示再最外层。

Stack未定位的子组件大小由fit参数决定，默认值是StackFit.loose，表示子组件自己决定，StackFit.expand表示尽可能的大，用法如下：

Stack(
  fit: StackFit.expand,
  ...
)

Stack未定位的子组件的默认左上角对齐，通过alignment参数控制，用法如下：

Stack(
  alignment: Alignment.center,
  ...
)

 有没有注意到fit和alignment参数控制的都是未定位的子组件，那什么样的组件叫做定位的子组件？使用Positioned包裹的子组件就是定位的子组件，用法如下：

Stack(
      fit: StackFit.loose,
      alignment: Alignment.center,
      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,
        ),
       Positioned(
         bottom: 0,
           right: 0,
           child:  ElevatedButton(onPressed: (){}, child: Text('这个视图按钮好')))
      ],
    )

 如果子组件超过Stack边界由clipBehavior控制，默认是裁剪，下面设置总是显示的用法：

Stack(
      clipBehavior: Clip.none,
      children: <Widget>[
        Container(
          height: 200,
          width: 200,
          color: Colors.red,
        ),
        Positioned(
          left: 100,
          top: 100,
          height: 150,
          width: 150,
          child: Container(
            color: Colors.green,
          ),
        )
      ],
    )

 IndexedStack

---

IndexedStack是Stack的子类，Stack是将所有的子组件叠加显示，而IndexedStack只显示指定的子组件，用法如下：

Column(
        children: [
          _buildView3(),
          Row(children: [
            ElevatedButton(onPressed: (){
              setState(() {
                _index=0;
              });
            }, child: Icon(Icons.fastfood)),
            ElevatedButton(onPressed: (){
              setState(() {
                _index=1;
              });
            }, child: Icon(Icons.cake)),
            ElevatedButton(onPressed: (){
              setState(() {
                _index=2;
              });
            }, child: Icon(Icons.local_cafe))
          ],)
        ],
      )



_buildView3(){
    return IndexedStack(
      index: _index,
      children: [
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            child: Icon(Icons.fastfood,color: Colors.blue,),
          ),
        ),

        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.red,
            child: Icon(Icons.cake,color: Colors.blue,),
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.blueGrey,
            child: Icon(Icons.local_cafe,color: Colors.blue,),
          ),
        ),
      ],
    );
  }

效果（点击切换_inex，只显示第index层视图）：

 Positioned

---

Positioned用于定位Stack子组件，Positioned必须是Stack的子组件，基本用法如下： 

Container(
      height: 300,
      width: 300,
      color: Colors.amberAccent,
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
            child: Container(color: Colors.red),
          ),
        ],
      ),
    )

 

 

相关说明：

• 提供top、bottom、left、right四种定位属性，分别表示距离上下左右的距离。

• 只能用于Stack组件中。

• left、right和width3个参数只能设置其中2个，因为设置了其中2个，第三个已经确定了，同理top、bottom和height也只能设置其中2个。

Positioned提供便捷的构建方式，比如Positioned.fromRect、Positioned.fill等，这些便捷的构建方式万变不离其宗，只不过换了一种方式设置top、bottom、left、right四种定位属性。