Flutter：水平 ListView 中的 ChipList 选项答案

【问题标题】：Flutter: ChipList options in horizontal ListViewFlutter：水平 ListView 中的 ChipList 选项
【发布时间】：2021-10-06 15:07:54
【问题描述】：

当我们在Flutter中创建ChipList时，当chips溢出时，下一个chip会出现取决于verticalDirection属性（可以是up/down）。

但是可以将芯片放在水平 ListView 中吗？所以当它溢出时，用户可以向右滚动查看下一个芯片。

这是过滤芯片的代码部分：

  Widget _SearchBody() => SingleChildScrollView(
        child: Container(
            child: FormBuilder(
          key: _formKey,
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              children: <Widget>[
  ...
  ...
  Padding(
              padding: EdgeInsets.only(top: 8),
              child:
                  Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Align(
                    alignment: Alignment.centerLeft,
                    child: Text('Tipe bahan bakar')),
                FormBuilderFilterChip(
                  name: 'Fuel',
                  decoration: InputDecoration(),
                  spacing: 8,
                  options: [
                    FormBuilderFieldOption(
                        value: 'diesel', child: Text('Diesel')),
                    FormBuilderFieldOption(
                        value: 'hybrid', child: Text('Hybrid')),
                    FormBuilderFieldOption(
                        value: 'bensin', child: Text('Bensin')),
                    FormBuilderFieldOption(
                        value: 'listrik', child: Text('Listrik')),
                  ],
                ),
              ]),
            ),
  ...
  ...

注意：我使用Flutter Form Builder package。

这是下面的结果，可以看出第4个筹码显示在其他3个筹码的下方，而我想要的是第4个筹码仍然在第3个筹码的右侧，并且用户只需在该屏幕部分向右滚动即可查看第 4 个筹码： Screenshot

谢谢。

【问题讨论】：

标签： flutter scroll chips

【解决方案1】：

您可以使用具有水平轴的 ListView 使芯片列表可向右滚动。

就这样吧：

ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
      Chip(
        label: Text("1"),
      ),
    ],
  )

就是这样。芯片不再包裹。

如果你已经用水平 ListView 包装了这个 ListView，你可以只使用一个 Column（就像你不能把两个常规 ListView 放在一起）。

希望能帮到你！

【讨论】：