颤振中的框架布局替代方案答案

【问题标题】：Framelayout alternative in flutter颤振中的框架布局替代方案
【发布时间】：2018-12-17 13:01:18
【问题描述】：

我想在另一个容器顶部添加一个 Flutter 容器，顶部容器将是透明的。基本上我在原生 Android 中使用 FrameLayout 来做到这一点。如何在 Flutter 中实现？

【问题讨论】：

你想要的是Stack吗？
我可以使用堆栈吗？ @RémiRousselet
Stack 允许将小部件放在其他小部件的顶部。并且，结合Positioned，随意放置它们。
您可以使用堆栈添加答案吗？ @RémiRousselet
完成。这是你想要的吗？

【解决方案1】：

您可以使用Align 根据对齐方式更好地控制小部件的位置。

Stack(
  children: <Widget>[
    Align(alignment: Alignment.center, child: Text("Center"),),
    Align(alignment: Alignment.topRight, child: Text("Top\nRight"),),
    Align(alignment: Alignment.centerRight, child: Text("Center\nRight"),),
    Align(alignment: Alignment.bottomRight, child: Text("Bottom\nRight"),),
    Align(alignment: Alignment.topLeft, child: Text("Top\nLeft"),),
    Align(alignment: Alignment.centerLeft, child: Text("Center\nLeft"),),
    Align(alignment: Alignment.bottomLeft, child: Text("Bottom\nLeft"),),
    Align(alignment: Alignment.topCenter, child: Text("Top\nCenter"),),
    Align(alignment: Alignment.bottomCenter, child: Text("Bottom\nCenter"),),
    Align(alignment: Alignment(0.0, 0.5), child: Text("Custom\nPostition", style: TextStyle(color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w800),),),
  ],
);

输出：

【讨论】：

【解决方案2】：

Stack 很可能是您想要的。

Stack 允许您随意将小部件放在其他小部件的顶部。并且，结合Positioned，具有自定义位置。

让我们在 Flutter 中画一个真实的框架：

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 200.0,
      height: 300.0,
      decoration: BoxDecoration(
        color: Colors.black12,
        border: Border.all(
          color: Colors.black,
          width: 3.0,
        ),
      ),
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
    Positioned(
      bottom: 10.0,
      right: 10.0,
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("Title"),
        ),
      ),
    )
  ],
),

【讨论】：