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

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

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

所以我给了屏幕宽度给定位（父小部件）和高度 40。你只需要给行中每个孩子的宽度。如果你想给它们一些灵活的关系，试试 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")),
                    )
                  ],
                ),
              ),
            ),

Answer 2

如果您不想为子元素设置固定宽度，则可以将left和right都设置为 0 以将 Positioned 元素拉伸到完整宽度：

Positioned(
  left: 0,
  right: 0,
  bottom: 0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(child: Text('Previous'), onPressed: () => {}),
      ElevatedButton(child: Text('Next'), onPressed: () => {}),
    ],
  ),
),

Positioned.fill()您还可以使用(传递null或要覆盖的属性的值 来实现相同的效果。 https://api.flutter.dev/flutter/widgets/Positioned/Positioned.fill.html https://youtu.be/EgtPleVwxBQ ?t=66

Positioned.fill(
  top: null,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(child: Text('Previous'), onPressed: () => {}),
      ElevatedButton(child: Text('Next'), onPressed: () => {}),
    ],
  ),
),