Flutter中的Framelayout替代方案

Question

我想在另一个Container的顶部添加一个Flutter容器，并使顶部的容器透明。在原生Android中，我通常使用FrameLayout实现此功能。如何在Flutter中实现这一点？

- Yeahia2508

---

你需要的是 Stack 吗？ - Rémi Rousselet

我可以使用堆栈来做到这一点吗？@RémiRousselet - Yeahia2508

Stack 允许将小部件放置在其他小部件之上。同时，与 Positioned 结合使用，可以任意定位它们的位置。 - Rémi Rousselet

你能使用堆栈添加一个答案吗？ @RémiRousselet - Yeahia2508

完成。这是您想要的吗？ - Rémi Rousselet

是的，感谢您的帮助 @RémiRousselet - Yeahia2508

Answer 1

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"),
        ),
      ),
    )
  ],
),

- Rémi Rousselet

Answer 2

您可以使用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),),),
  ],
);

---

输出：

- CopsOnRoad