[英]Framelayout alternative in flutter
I want to add a Flutter Container in top of another Container and top container will be transparent. 我想在另一个容器的顶部添加Flutter容器,顶部的容器将是透明的。 Basically I do that in native Android using FrameLayout.
基本上,我是在本机Android中使用FrameLayout进行的。 How to implement this in Flutter?
如何在Flutter中实现这一点?
Stack
is most likely what you want. Stack
很可能是您想要的。
Stack
allows to put widgets on the top of others however you like. Stack
允许根据您的喜好将小部件放在其他顶部。 And, combined with Positioned
, have custom positions. 并且,与
Positioned
结合使用,可以自定义位置。
Let's draw a real frame in flutter : 让我们在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"),
),
),
)
],
),
You can use Align
to better control the position of your widget based on alignment. 您可以使用
Align
来根据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),),),
],
);
Output: 输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.