Flutter Widget 之Stack

你是否觉得限制与Column、Row或者Container布局的配置？

如果你曾想过层叠窗口小工具，那么Stack widget正式你所需要的。

Stack获取widget 列表，并以之为基础重新算图，并一次向上叠加

Stack(
    fit: StackFit.loose,
    children: <Widget>[
        myGrayBox,
        myRedBox,
        myGreenBox,
        myBlueBox,
        myYellowBox,
    ]
)

Stack的默认大小，适配所有为定位的子节点  fit: StackFit.loose,

你可以将其置换成扩展，以填充Stack的父节点 fit: StackFit.expand,

如果没有其他内容，如果没有其他内容

所有Stack的子节点，都将与topStart对齐，并视文本你方向来决定。

对齐属性alignment会为所有未定位或部分定位的Stack子节点更改此值

Stack(
    alignment: AlignmentDirectional.bottomCenter,
    //...
)

你可以使用Positioned widget

Stack(
    children: <Widget>[
        myGrayBox,
        myRedBox,
        Positioned(
            bottom: 0,
            right: 0,
            child: myGreenBox,
        ),
        myBlueBox,
        myYellowBox,
    ]
)

在Stack中，指定特定的子节点的位置 Positioned

Stack(
    children: <Widget>[
        myGrayBox,
        Positioned(
            bottom: -50,
            right: -50,
            child: myBlueBox,
        ),
    ]
    //overflow: Overflow.clip
    overflow: Overflow.visible,
)

你可以使用overflow属性来控制它，是否要出啊出界限被裁剪  overflow: Overflow.visible,

overflow: Overflow.clip

如果想了解有关Stack的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址