Flutter-Stack

Flutter组件之Stack

叠层组件

属性

叠层的实现是从上到下，即越往下的组件越在界面最上面

必选

1. children => List<Widget>  所包含的组件（孩子）

可选

1. alignment 	=> Alignment	子组件的布局（即孩子在容器内的对齐）

例子

// 最底层是250*250的白色底色，上一层是背景为红橙黄渐变色的组件(渐变色覆盖了底色的白色)
// 最上面为一个50*50，位置为RightCenter(1.0,0.5)的绿色组件
Stack(
  children: <Widget>[
    Container(
      width: 250,
      height: 250,
      color: Colors.white,
    ),
    Container(
      padding: EdgeInsets.all(5.0),
      alignment: FractionalOffset(0.5, 0.8),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: <Color>[
            Colors.red,
            Colors.orange,
            Colors.yellow
          ],
        ),
      ),
      child: Text(
        "Foreground Text",
        style: TextStyle(color: Colors.white, fontSize: 20.0),
      ),
    ),
	Container(
      alignment: FractionalOffset(1.0, 0.5),
      child: Container(
        color: Colors.lightGreenAccent,
        width: 50.0,
        height: 50.0,
      ),
    ),
  ],
)