Flutter控件的Stack（复合布局组件，常与Positioned组件配合使用）

Stack组件相当于Android布局中的frame布局。它是一种组件覆盖组件的分层布局，通常与 Positioned 组件结合使用。它的构造方式如下：

Stack({
    Key key,
    //子控件的对齐方式
    this.alignment = ,
    //文本的方向
    this.textDirection,
    //子控件的填充方式
    this.fit = ,
    //子控件超出父控件时候的处理
    this.overflow = ,
    List children = const [],
  })

你能在下图中看到它是使用Stack布局实现的吗？这种布局有很多用途，例如头像上的昵称和电话号码；遮罩效果等。

渲染

让我们仔细看看它本身的属性。

alignment

该属性与Container控件的对齐属性相同。具体介绍在Flutter控制容器入口中。这里直观地给出了属性的功能。

Widget _alignStack()=>Container(
    margin: (top: 10),
    color: ,
    constraints: (height: 180),
    child: Stack(
      //子控件的对齐方式是
      alignment: ,
      children: [
        Container(alignment: ,
        color: ,
        child: Text("",style: TextStyle(color: ),),),
        Container(
          height: 100,
            width: 100,
          color: ,

        ),
        Container(height: 60,width: 60,color: ,)
      ],
    ),
  );

渲染

textDirection

字幕控件的文字方向有两种模式。

• 从左到右
• 从右到左

Widget _textLeftStack()=>Container(
    margin: (top: 10),
    color: ,
    padding: (vertical: 10,horizontal: 10),
    constraints: (height: 180),
    child: Stack(
      textDirection: ,
      children: [
        Text('left to rigt',style: TextStyle(color: ),),
      ],
    ),
  );

渲染

Widget _textRightStack()=>Container(
    margin: (top: 10),
    constraints: (height: 180),
    color: ,
    padding: (horizontal: 10,vertical: 10),
    child: Stack(
      textDirection: ,
      children: [
        Text(' rigt to left',style: TextStyle(color: ),),
      ],
    ),
  );

渲染

适合

子控件填充模式用于控制大小。由StackFit枚举类驱动。

• 单击最小的
• 单击最大的。
• Stack最顶层是->扩展->行，横向尽量大，纵向尽量小。取决于父控件

Widget _fitStack()=>Container(
    color: ,
    margin: (top: 10),
    constraints: (height: 220),
    child: Column(
      mainAxisAlignment: ,
      crossAxisAlignment: ,
      children: [
        Container(
          margin: (top: 10),
          constraints: (height: 60),
          color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',style: TextStyle(color: ,fontSize: 20),),
              ),
            ],
          ),
        ),
        Container(
          margin: (top: 10),
          constraints: (height: 60),
          color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',style: TextStyle(color: ,fontSize: 20),),

              ),
            ],
          ),
        ),

        Container(constraints: (height:60),
        margin: (top: 10),
        color: ,
          child: Stack(
            fit: ,
            children: [
              Container(
                color: ,
                child: Text('',
                style: TextStyle(color: ,fontSize: 20),),
              ),
            ],
          ),
        ),
      ],
    ),
  );

渲染

当子控件的内容超出Stack控件时，有两种模式来检查控件之外的内容是否被裁剪或可见。

• 可见，但会超过
• 裁剪

Widget _overflowVisibleStack()=>Container(
    margin:  (top: 10),
    color: ,
    constraints: (height: 40),
    child: Stack(
      overflow: ,
      children: [
        Positioned(
          top: 15,
          child: Text("Flutter 基础布局Widgets之Stack\nFlutter 基础布局Widgets之Stack",
            style: TextStyle(color: ),),
        ),
      ],
    ),
  );

Widget _overClipStack()=>Container(
    margin:  (top: 40),
    color: ,
    constraints: (height: 40),
    child: Stack(
      overflow: ,
      children: [
        Positioned(
          top: 15,
          child: Text("Flutter 基础布局Widgets之Stack\nFlutter 基础布局Widgets之Stack",
            style: TextStyle(color: ),),
        ),
      ],
    ),
  );

渲染

Positioned

Stack中用于控制子控件在布局中位置的组件。构造方式：

const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  })

顾名思义，它从各个方向控制下属的位置。

class StackWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: (),
      child: new Stack(
        alignment: , //指定未定位或部分定位widget的对齐方式
        children: [
          Container(
            child: Text(
              'positioned-null',
              style: TextStyle(color: ),
            ),
            color: ,
          ),
          Positioned(
            left: ,
            child: Text('positioned-left'),
          ),
          Positioned(
            top: 18,
            child: Text('positioned-top'),
          ),
          Positioned(
            bottom: 18,
            child: Text('positioned-bottom'),
          ),
          Positioned(
            right: 18,
            child: Text('positioned-right'),
          ),
        ],
      ),
    );
  }
}

渲染