时间戳

首页 > 解决方案 > Flutter：水平 ListView 中的 ChipList 选项

flutter - Flutter：水平 ListView 中的 ChipList 选项

问题描述

当我们在 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 包。

这是下面的结果，可以看到第 4 个筹码显示在其他 3 个筹码的下方，而我想要的是第4 个筹码仍然在第 3 个筹码的右侧，用户可以滚动到就在那个屏幕部分可以看到第四个芯片： 截图

谢谢你。

标签： flutterscrollchips

解决方案

您可以使用具有水平轴的 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 （就像你不能把两个常规 ListViews 放在一起一样）。

我希望我能帮助你！

推荐阅读