flutter_chips_choice

smart_select 包的精简版，零依赖，提供单选或多选芯片的简便方法。

chips_choice

下载

qr-apk

特点

  • 选择单个或多个选项
  • 显示在可滚动或换行的列表中
  • 从任何列表中构建选项
  • 可自定义的选项小部件

用法

有关完整用法，请参阅示例。

要阅读更多关于chips_choice使用的类和其他引用的信息，请参阅文档。

单选

int tag = 1;
List<String> options = [
  'News', 'Entertainment', 'Politics',
  'Automotive', 'Sports', 'Education',
  'Fashion', 'Travel', 'Food', 'Tech',
  'Science',
];

// ChipsChoice<T>.single
ChipsChoice<int>.single(
  value: tag,
  options: ChipsChoiceOption.listFrom<int, String>(
    source: options,
    value: (i, v) => i,
    label: (i, v) => v,
  ),
  onChanged: (val) => setState(() => tag = val),
);

多选

List<String> tags = [];
List<String> options = [
  'News', 'Entertainment', 'Politics',
  'Automotive', 'Sports', 'Education',
  'Fashion', 'Travel', 'Food', 'Tech',
  'Science',
];

// ChipsChoice<T>.multiple
ChipsChoice<String>.multiple(
  value: tags,
  options: ChipsChoiceOption.listFrom<String, String>(
    source: options,
    value: (i, v) => v,
    label: (i, v) => v,
  ),
  onChanged: (val) => setState(() => tags = val),
);

构建选项列表

options属性是List<ChipsChoiceOption<T>>，可以直接按如下示例输入，有关ChipsChoiceOption的更多信息，请参阅API参考。

ChipsChoice<T>.single/multiple(
  ...,
  ...,
  options: <ChipsChoiceOption<T>>[
    ChipsChoiceOption<T>(value: 1, label: 'Entertainment'),
    ChipsChoiceOption<T>(value: 2, label: 'Education'),
    ChipsChoiceOption<T>(value: 3, label: 'Fashion'),
  ],
);

options也可以使用此包提供的辅助函数从任何列表中创建，如下例所示。

List<Map<String, String>> days = [
  { 'value': 'mon', 'title': 'Monday' },
  { 'value': 'tue', 'title': 'Tuesday' },
  { 'value': 'wed', 'title': 'Wednesday' },
  { 'value': 'thu', 'title': 'Thursday' },
  { 'value': 'fri', 'title': 'Friday' },
  { 'value': 'sat', 'title': 'Saturday' },
  { 'value': 'sun', 'title': 'Sunday' },
];

ChipsChoice<T>.single/multiple(
  ...,
  ...,
  options: ChipsChoiceOption.listFrom<T, Map<String, String>>(
    source: days,
    value: (index, item) => item['value'],
    label: (index, item) => item['title'],
  ),
);

可滚动或换行的列表

ChipsChoice<T>.single/multiple(
  ...,
  ...,
  isWrapped: false/true,
);

GitHub

https://github.com/davigmacode/flutter_chips_choice