Flutter中如何将Checkbox选中值转为字符串并打印选中项？

问题说明 #

现有Flutter代码实现了多选Checkbox，默认未选中，需要将选中的Checkbox标题转为字符串并在控制台打印，但不清楚如何将Checkbox的布尔值与对应名称关联。

优化方案 #

原代码用独立布尔变量管理每个Checkbox状态，不仅代码冗余，还难以关联名称。建议用统一数据结构管理所有Checkbox的名称和选中状态，比如包含name和isChecked字段的列表，既能简化代码，又能直接获取选中项的名称。

实现步骤 #

1. 定义列表存储每个Checkbox的名称与初始选中状态（默认false）
2. 遍历列表动态生成CheckboxListTile，避免重复代码
3. 在onChanged回调中更新对应项的选中状态，可即时打印单个选中/取消操作；也可添加按钮批量打印所有选中项

优化后的完整代码 #

import 'package:flutter/material.dart';

class HomePageWidget extends StatefulWidget {
  const HomePageWidget({Key? key}) : super(key: key);

  @override
  _HomePageWidgetState createState() => _HomePageWidgetState();
}

class _HomePageWidgetState extends State<HomePageWidget> {
  // 统一管理所有Checkbox的名称和选中状态
  final List<Map<String, dynamic>> _checkboxItems = [
    {'name': 'c++', 'isChecked': false},
    {'name': 'c', 'isChecked': false},
    {'name': 'java', 'isChecked': false},
    {'name': 'react', 'isChecked': false},
    {'name': 'dart', 'isChecked': false},
  ];

  // 批量打印所有选中项
  void _printSelectedItems() {
    final selectedNames = _checkboxItems
        .where((item) => item['isChecked'] == true)
        .map((item) => item['name'])
        .toList();
    print('选中的项：${selectedNames.join(', ')}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text('Page Title'),
        centerTitle: false,
        elevation: 2,
      ),
      body: SafeArea(
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              // 遍历生成所有CheckboxListTile
              ..._checkboxItems.map((item) {
                return Theme(
                  data: ThemeData(unselectedWidgetColor: const Color(0xFF95A1AC)),
                  child: CheckboxListTile(
                    value: item['isChecked'],
                    onChanged: (newValue) {
                      setState(() {
                        item['isChecked'] = newValue!;
                        // 单个选项切换时即时打印
                        print(newValue ? '选中了${item['name']}' : '取消选中${item['name']}');
                      });
                    },
                    title: Text(item['name']),
                    tileColor: const Color(0xFFF5F5F5),
                    dense: false,
                    controlAffinity: ListTileControlAffinity.trailing,
                  ),
                );
              }).toList(),
              // 添加按钮批量打印选中项
              ElevatedButton(
                onPressed: _printSelectedItems,
                child: const Text('打印选中项'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明 #

• 新增或删除Checkbox只需修改_checkboxItems列表，无需重复编写Widget代码
• 支持单个选项切换时即时反馈，也支持批量打印所有选中项
• 代码结构更简洁，逻辑清晰，完美关联Checkbox的选中状态与对应名称

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