连续显示ListView项目

时间:2020-08-19 17:06:03

标签: flutter dart flutter-layout

我很难弄清楚如何连续获取我的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());
        },
      ),
    );
  }

enter image description here

1 个答案:

答案 0 :(得分: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) {},
              );
            },
          ),
        ),
      ),
    );
  }
}

结果:

enter image description here