Flutter如何实现绑定API布尔值的DataTable行内Checkbox选中功能

原代码问题说明 #

• 误用where方法遍历生成组件：where是集合过滤方法，不会返回组件列表，遍历生成组件需要用map方法
• 所有复选框共用单个isSelected布尔值，无法实现单选互斥效果
• Container没有和选中状态做绑定，无法接收bool值响应样式变化

实现逻辑 #

• 在组件对应的State中声明两个状态：一个记录当前选中的单元格唯一值（支持任意类型，和单元格内容匹配即可），一个是给Container用的布尔类型状态
• 遍历单元格生成复选框时，每个复选框的选中态判断逻辑为「当前遍历项 == 状态中记录的选中值」
• 点击复选框时通过setState更新选中值，同组其他复选框会自动变为未选中状态，同步更新Container绑定的布尔值即可
• 如果需要整表行单选，把选中状态提升到DataTable的父组件层级共用即可

可直接复用的修正代码 #

首先在对应State类中声明状态变量：

// 记录当前选中的单元格内容，初始为null表示无选中项
dynamic selectedCellVal;
// Container接收的bool类型状态，有选中项时为true
bool containerSelectedStatus = false;

修正后的组件代码：

Container(
  height: 50.0,
  // 直接使用bool值控制Container样式，示例为选中时显示浅蓝背景，可按需调整
  color: containerSelectedStatus ? Colors.blue.withOpacity(0.1) : Colors.transparent,
  child: Column(
    children: row.getCells()[5].map<Widget>((cellContent) {
      return CheckboxListTile(
        title: Text(cellContent.toString()),
        value: selectedCellVal == cellContent,
        onChanged: (val) {
          setState(() {
            // 单选逻辑：点击后仅当前项为选中态
            selectedCellVal = val == true ? cellContent : null;
            // 同步更新Container绑定的bool值
            containerSelectedStatus = selectedCellVal != null;
          });
        },
      );
    }).toList(),
  ),
)

注意：如果需要做整表跨行单选，只需要把selectedCellVal和containerSelectedStatus两个状态提升到DataTable所在的父组件状态中，所有行的复选框共用这两个状态，无需额外逻辑即可实现整表单选效果。

内容的提问来源于stack exchange，提问作者Faith.youssef.abk