Flutter ④《帧布局-Stack》

Stack

可以允许其子widget简单的堆叠在一起，同时它的子Widget是相对于自身的边框定位的。
我们来看看Stack的用法

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

预览效果：

图片.png

接下来我们看下这个效果

SizedBox(
  width: 250,
  height: 250,
  child: Stack(
    children: <Widget>[
      Container(
        width: 250,
        height: 250,
        color: Colors.white,
      ),
      Container(
        padding: EdgeInsets.all(5.0),
        alignment: Alignment.bottomCenter,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
              Colors.black.withAlpha(0),
              Colors.black12,
              Colors.black45
            ],
          ),
        ),
        child: Text(
          "Foreground Text",
          style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
      ),
    ],
  ),
)

预览：

图片.png

上面实现了一个带渐变背景的 文本展示布局

如果要以特定模式放置多个子项，或者如果要创建自定义布局管理器，则可能需要使用CustomMultiChildLayout。特别是，使用堆栈时，无法根据大小或堆栈自身大小来定位子项