具有动态高度和水平滚动ListView的BottomSheet

Question

我想实现一个 BottomSheet，它的高度适应其内容，并包含一个简短的水平项目列表（最多 20 个项目）。

showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return SafeArea(
                      child: Wrap(
                        children: [
                          ListTile(title: Text('Foo')),
                          ListTile(title: Text('Bar')),
                          Expanded(
                            child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: 100,
                              itemBuilder: (_, index) {
                                return Card(
                                  child: Padding(
                                    padding: EdgeInsets.all(8),
                                    child: Text("Item $index"),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                );

问题：

无论我尝试什么，用扩展等包装，我总是收到错误

Failed assertion... hasSize

。

我想在底部工作表内实现水平滚动列表，就像材料文档的图片中那样

这怎么可能？

感谢您的帮助！

Answer 1

您需要用

ListView.builder

将

SizedBox

包裹在

height

中。

示例：

showModalBottomSheet(
      context: context,
      builder: (context) {
        return SafeArea(
          child: Wrap(
            children: [
              const ListTile(title: Text('Foo')),
              const ListTile(title: Text('Bar')),
              SizedBox(
                height: 50,
                width: double.infinity,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 100,
                  itemBuilder: (_, index) {
                    return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text("Item $index"),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        );
      },
    );