水平 ListView.builder 滚动时溢出宽度限制答案

【问题标题】：Horizontal ListView.builder overflow width bound when scroll水平 ListView.builder 滚动时溢出宽度限制
【发布时间】：2019-04-11 07:30:58
【问题描述】：

我正在尝试使用 ListView.builder 在 Stack 中显示水平列表，但如果我设置 itemCount: 10，则在滚动 ListView 时会遇到这个奇怪的错误。如果我设置itemCount: 20，ListView 会像往常一样滚动。

我已经在模拟器 (Galaxy Nexus 720x1280 android 5.0) 和真实设备 (Nokia 7 plus, android 9.0) 上进行了测试。我该如何解决这个问题？

class BugPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 20.0,
              right: 20.0,
              height: 60.0,
              bottom: 70.0,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 10, // Overflow when scroll.
                      itemBuilder: (BuildContext context, int index) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 3.0,
                          ),
                          child: Container(
                            width: 40.0,
                            height: 40.0,
                            color: Colors.red,
                            child: Center(child: Text("$index")),
                          ),
                        );
                      },
                    ),
                  ),
                  SizedBox(width: 10.0),
                  FloatingActionButton(
                    backgroundColor: Colors.blue,
                    onPressed: () {},
                    child: new Icon(
                      Icons.add,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

预期输出：

实际输出：

还有一个video of the problem

【问题讨论】：

可以添加错误日志吗？我对此代码没有任何问题
@AmolG 控制台日志没有显示任何错误，只是在我的模拟器中滚动时列表视图 UI 溢出最大宽度限制。请观看我上传的新video 了解更多信息。
从图像 1 到图像 2 的唯一更改是 itemCount: 10 到 itemCount: 20？这两个代码之间还有其他变化吗？
我试过你的代码，它没有显示溢出，有 10 或 20，你能告诉你如何调用BugPage
尝试更改为灵活而不是扩展

标签： dart flutter flutter-layout

【解决方案1】：

我尝试了你的代码并以更大的 intemcount 运行也没有问题，但我有一个建议，改变

SizedBox(width: 10.0)

按钮周围的填充

Padding(
  padding: const EdgeInsets.only(left: 10),
  child: FloatingActionButton(
    backgroundColor: Colors.blue,
    onPressed: () {},
    child: new Icon(
      Icons.add,
      color: Colors.black,
    ),
  )
)

【讨论】：

不错的一个！为我工作

【解决方案2】：

在我更新到最新版本后，似乎这个错误出现在旧的颤振版本中。

【讨论】：