Question

我有以下代码，我希望水平显示项目，但垂直显示它们。有人知道我在做什么错吗？

                      ListView.builder(
                          itemCount: _categories.length,
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemBuilder: (_, i) => Wrap(
                            direction: Axis.horizontal,
                            spacing: 10.0,
                            runSpacing: 20.0,
                            children: [
                              CategoryItem(
                                _categories[i].id,
                                _categories[i].name,
                                _categories[i].description,
                                _categories[i].imageUrl,
                                _categories[i].restaurantId,
                              ),
                              Divider(),
                            ],
                          ),
                        ),

Answer 1

可能是您需要将Scroll Direction从Vertical更改为Horizontal，如下所示。当前，您正在将其设置为Vertical，从而导致问题按如下所示更改您的代码。

    ListView.builder(
        itemCount: _categories.length,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemBuilder: (_, i) => Wrap(
        direction: Axis.horizontal,
        spacing: 10.0,
        runSpacing: 20.0,
        children: [
        CategoryItem(
            _categories[i].id,
            _categories[i].name,
            _categories[i].description,
            _categories[i].imageUrl,
            _categories[i].restaurantId,
            ),
            Divider(),
        ],
      ),
    ),

Answer 2

您需要通过以下操作将scrollDirection中的ListView设置为horizontal：

scrollDirection: Axis.horizontal。

检查下面的代码，效果很好。

      ListView.builder(
                          // set the scrollDirection here 
                          scrollDirection: Axis.horizontal,  
                          itemCount: _categories.length,
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemBuilder: (_, i) => Wrap(
                            direction: Axis.horizontal,
                            spacing: 10.0,
                            runSpacing: 20.0,
                            children: [
                              CategoryItem(
                                _categories[i].id,
                                _categories[i].name,
                                _categories[i].description,
                                _categories[i].imageUrl,
                                _categories[i].restaurantId,
                              ),
                              Divider(),
                            ],
                          ),
                        ),

我希望这会有所帮助。

Answer 3

设置scrollDirection: Axis.horizontal或删除scrollDirection:属性，默认滚动方向为水平。

带有包装小部件的Flutter ListView.builder

3 个答案: