代码之家 › 专栏 › 技术社区 › Yeahia2508

颤振中的框架布置方案

flutter-layout flutter android

Yeahia2508 · 技术社区 · 8 年前

我想在另一个容器的顶部添加一个颤振容器,顶部容器将是透明的。基本上我是在原生android中使用framelayout来实现的。如何在flutter中实现这一点?

1 回复 | 直到 8 年前

Rémi Rousselet 8 年前

Stack 很可能是你想要的。

堆叠 允许您随意将小部件放在其他小部件之上。再加上 Positioned ,具有自定义位置。

让我们画一个真实的颤振框架:

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

CopsOnRoad 6 年前

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

输出: