Flutter新手求教：如何实现两个如图所示的复选框列表？

首先纠正你代码里的拼写错误：CheckboxlListTitle 应该是 CheckboxListTile，这个小错误会导致代码无法正常运行。

下面提供两种实现多复选框列表的方式，适合不同场景：

方式一：简单实现两个独立复选框 #

适合只需要少量（比如2个）复选框的场景，直接维护独立的状态变量即可：

import 'package:flutter/material.dart';

class CheckboxListDemo extends StatefulWidget {
  const CheckboxListDemo({super.key});

  @override
  State<CheckboxListDemo> createState() => _CheckboxListDemoState();
}

class _CheckboxListDemoState extends State<CheckboxListDemo> {
  // 为每个复选框定义独立的选中状态变量
  bool _isChecked1 = false;
  bool _isChecked2 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('复选框列表示例')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            CheckboxListTile(
              title: const Text('Title1'),
              value: _isChecked1,
              onChanged: (bool? newValue) {
                setState(() {
                  // 处理null值，确保状态始终为bool类型
                  _isChecked1 = newValue ?? false;
                });
              },
              activeColor: Colors.green,
              controlAffinity: ListTileControlAffinity.leading,
              tristate: false,
            ),
            CheckboxListTile(
              title: const Text('Title2'),
              value: _isChecked2,
              onChanged: (bool? newValue) {
                setState(() {
                  _isChecked2 = newValue ?? false;
                });
              },
              activeColor: Colors.green,
              controlAffinity: ListTileControlAffinity.leading,
              tristate: false,
            ),
          ],
        ),
      ),
    );
  }
}

方式二：用列表批量管理复选框 #

如果后续需要添加更多复选框，这种方式更易维护，通过列表存储所有选项的标题和选中状态：

import 'package:flutter/material.dart';

class CheckboxListDemo extends StatefulWidget {
  const CheckboxListDemo({super.key});

  @override
  State<CheckboxListDemo> createState() => _CheckboxListDemoState();
}

class _CheckboxListDemoState extends State<CheckboxListDemo> {
  // 存储所有复选框的标题和选中状态
  List<Map<String, dynamic>> _checkboxItems = [
    {'title': 'Title1', 'isChecked': false},
    {'title': 'Title2', 'isChecked': false},
    // 可以继续添加更多选项
    // {'title': 'Title3', 'isChecked': false},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('复选框列表示例')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          // 通过map遍历列表生成复选框
          children: _checkboxItems.map((item) {
            return CheckboxListTile(
              title: Text(item['title']),
              value: item['isChecked'],
              onChanged: (bool? newValue) {
                setState(() {
                  item['isChecked'] = newValue ?? false;
                });
              },
              activeColor: Colors.green,
              controlAffinity: ListTileControlAffinity.leading,
              tristate: false,
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键说明 #

• 两种方式都使用StatefulWidget来维护复选框的选中状态，通过setState()更新UI
• controlAffinity: ListTileControlAffinity.leading让复选框显示在标题左侧，和你想要的效果一致
• activeColor: Colors.green设置复选框选中时的颜色，保持你代码里的需求

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