颤动中的框架布局替代方案

Question

我想在另一个 Container 的顶部添加一个 Flutter Container，并且顶部容器是透明的。基本上，我使用 FrameLayout 在本机 Android 中执行此操作。如何在 Flutter 中实现？

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

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

输出：

颤动中的框架布局替代方案

Framelayout alternative in flutter

android

flutter

flutter-layout