Flutter 在 ListView 中展开 Row

Question

我想用 Row在水平滚动列表中。当该行只有几个 child 时，该行应占满并申请 mainAxisAlignment: MainAxisAlignment.spaceEvenly这样它看起来像这样:

但是，当有很多项目，以至于它不能完全适合屏幕时，该行应该是可滚动的。
我目前有这个代码:

    Container(
      height: 40,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                width: 100,
                height: 40,
                color: Colors.red
              ),
              Container(
                width: 100,
                height: 40,
                color: Colors.blue
              ),
              
            ],
          ),
        ],
      ),
    ),

然而，Row 的宽度仅与 child 的宽度相加，因此它不适用 mainAxisAlignment: MainAxisAlignment.spaceEvenly .所以它看起来像这样:

在 Flutter 中是否有实现这一目标的好方法？所以我需要扩展 Row 以至少包含完整的 ListView，但也允许它变大。

Answer 1

我们可以使用 LayoutBuilder了解我们视口(viewport)的约束。
在里面我们可以返回一个 SingleChildScrollView应用滚动效果。
现在我们希望行的最小宽度与我们拥有的最大宽度相同，这里我们可以使用 ConstrainedBox添加一个额外的 minWidth对我们行的约束:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints viewportConstraints) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: viewportConstraints.maxWidth,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(width: 100, height: 40, color: Colors.red),
            Container(width: 100, height: 40, color: Colors.blue),
          ],
        ),
      ),
    );
  },
),

注意我们如何使用 MainAxisSize.min因为我们希望该行使用尽可能小的宽度，但它受到 minWidth 的限制。我们提供给 ConstrainedBox .
结果:

当它们不合适时: