在 flutter 中,我想要一个具有固定高度和 100% 宽度的容器。
为此,我使用了:
Row(
children: <Widget>[
Flexible(
child: Container(
color: Colors.blue,
height: 40.0,
),
),
],
),
现在,我想将这一行偏移屏幕几个像素。为此,我尝试使用:
Stack(
children: <Widget>[
Positioned(
left: -5.0,
child: Row(
children: <Widget>[
Flexible(
child: Container(
color: Colors.blue,
height: 40.0,
),
),
],
),
),
],
),
这给了我错误:
在 performLayout() 期间抛出以下断言:RenderFlex 子级具有非零弹性但传入宽度约束是无界的。
如何创建这种布局效果?
最佳答案
尝试提供特定尺寸的子部件。定位的小部件不能有灵活的 child 大小。
所以我给 Positioned(父小部件)屏幕宽度和高度 40。你只需要给 Row 中每个 child 的宽度。如果您想给它们一些灵活的关系,请尝试 Row 小部件中的 MainAxisAlignment 属性。
这是我的例子。
Positioned(
width: MediaQuery.of(context).size.width,
height: 40.0,
left: -5.0,
child: Container(
color: Colors.grey,
child: Row(
children: <Widget>[
Container(
color: Colors.green,
width: MediaQuery.of(context).size.width / 3,
child: Center(
child: Text("Green")
),
),
Container(
color: Colors.pink,
width: MediaQuery.of(context).size.width / 3,
child: Center(child: Text("Pink"))
),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width / 3,
child: Center(child: Text("Blue")),
)
],
),
),
),
关于dart - flutter 用户界面 : Absolute positioned element with fixed height and 100% width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55191868/