Question

在扑朔迷离中，我想有一个高度固定且宽度为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子级的flex为非零值，但传入的宽度约束是不受限制的。

我将如何创建这种布局效果？

Answer 1

尝试提供特定大小的子代小部件。定位的小部件的子级大小不能灵活。

因此，我将屏幕宽度设置为Positioned（父窗口小部件），并将其高度设置为40。您只需要在Row中指定每个子项的宽度。如果您想给他们一些灵活的关系，请尝试使用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")),
                    )
                  ],
                ),
              ),
            ),

Flutter UI：具有固定高度和100％宽度的绝对定位元素

1 个答案: