如何在Flutter的CheckboxListTile中设置类似HTML的自定义提交值

不用手动转换展示文本，你可以通过将展示文本和业务提交值提前绑定到同一条数据记录的方式，实现和HTML checkbox一致的效果，具体实现如下：

步骤1：定义绑定了展示内容和业务值的数据模型 #

你可以单独封装模型类，也可以直接用Map存储，优先推荐封装模型类，可维护性更高：

// 自定义复选框选项模型，泛型支持适配不同类型的业务值
class CheckboxOption<T> {
  // 页面展示的文本
  final String label;
  // 提交用的业务值
  final T value;
  // 选中状态标记
  bool isSelected;

  CheckboxOption({
    required this.label,
    required this.value,
    this.isSelected = false,
  });
}

步骤2：初始化业务选项列表 #

// 示例：水果选项列表，业务值为字符串类型
List<CheckboxOption<String>> fruitOptions = [
  CheckboxOption(label: "Small Apple", value: "small_apple"),
  CheckboxOption(label: "Big Apple", value: "big_apple"),
];

步骤3：渲染CheckboxListTile并绑定状态 #

遍历选项列表生成对应的复选框组件，将复选框的选中状态和模型的isSelected属性绑定：

ListView.builder(
  itemCount: fruitOptions.length,
  itemBuilder: (context, index) {
    final option = fruitOptions[index];
    return CheckboxListTile(
      title: Text(option.label),
      // 绑定当前选项的选中状态
      value: option.isSelected,
      onChanged: (checked) {
        // 状态变更时同步更新模型数据
        setState(() {
          option.isSelected = checked ?? false;
        });
      },
    );
  },
)

步骤4：提交时直接提取选中项的业务值 #

不需要做任何文本转换，直接过滤选中项、提取业务值即可，得到的结果和HTML中勾选提交的fruits数组完全一致：

List<String> getSelectedFruitValues() {
  return fruitOptions
      .where((option) => option.isSelected)
      .map((option) => option.value)
      .toList();
}

内容的提问来源于stack exchange，提问作者ASH