dart - flutter 用户界面 : Absolute positioned element with fixed height and 100% width

Question

在 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 子级具有非零弹性但传入宽度约束是无界的。

如何创建这种布局效果？

Answer 1

尝试提供特定尺寸的子部件。定位的小部件不能有灵活的 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")),
                    )
                  ],
                ),
              ),
            ),