连续显示 ListView 项答案

【问题标题】：Display ListView items in a row连续显示 ListView 项
【发布时间】：2020-12-09 00:07:56
【问题描述】：

我很难弄清楚如何连续获得我的 FilterChips。我想在一行中显示每个类别的所有 FilterChips，而不是在单独的列中。尝试了不同的方法，但似乎都不起作用。

希望有人可以帮助我，谢谢您的帮助！

这是我的代码：

    Widget _buildListView(List<Category> categories) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: categories.length,
            itemBuilder: (context, index) {
              return _buildSection(categories[index]);
            },
          ),
        ),
      ],
    );
  }

  Widget _buildSection(Category category) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          category.title,
          style: TextStyle(fontSize: 18),
        ),
// How can I get my FilterChips side by side?
        Row(
          children: [
            Flexible(
              child: ListView.builder(
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: category.interests.length,
                  itemBuilder: (context, index) {
                    Interest interest = category.interests[index];
                    return FilterChip(label: Text(interest.interest), onSelected: (isSelected){
                      selectedInterests.add(interest.id);
                    });
                    return Text(interest.interest);
                  }),
            ),
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: categories,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Category> categories = snapshot.data;
            return _buildListView(categories);
          }

          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(
          top: 60,
          left: 10.0,
          right: 10.0,
        ),
        child: Wrap(
          children: List.generate(
            10,
            (index) {
              return FilterChip(
                label: Text('index $index'),
                onSelected: (val) {},
              );
            },
          ),
        ),
      ),
    );
  }
}

结果：

【讨论】：

使用 scrollDirection 我得到这样的错误：'constraints.hasBoundedHeight': is not true.
希望这会有所帮助。 stackoverflow.com/questions/54774024/…
如果我理解您的问题，您需要FilterChip 才能水平滚动吗？然后不需要包装Row 和Flexible 小部件。我更新了答案。
其实我不希望 FilterChips 是可滚动的，只是在一行中组合在一起。 ListView 是否是用于此目的的错误 Widget？
如果您不希望 FilterChips 可滚动，那么您不应该使用 ListView。 Wrap 小部件正是您所需要的。