Flutter中如何将选中的Checkbox值传递至新页面？

你需要实现仅将选中的Checkbox值传递到新页面，且仅在有选中项时执行跳转。原代码存在状态丢失、空指针风险和传值逻辑冗余的问题，以下是修正方案：

问题分析 #

• 状态变量定义在build方法内，每次Widget重建都会重置，导致选中状态无法保留
• 直接用!强制解包可能为空的变量，会触发空指针异常
• 传值逻辑拆分过细，多个参数传递不利于扩展
• 目标页面仅处理单一参数，无法展示所有选中情况

修正后的Checkbox页面代码 #

class _CheckBoxPageState extends ConsumerState<CheckBoxPage> {
  // 将选中状态用列表统一管理，避免零散变量导致的状态丢失
  final List<String> _selectedValues = [];

  @override
  Widget build(BuildContext context) {
    final readAsync = ref.watch(checkRepoProvider);

    return Scaffold(
      appBar: const AppBar(title: Text("check")),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
        child: MaterialButton(
          padding: const EdgeInsets.all(16),
          color: Colors.black,
          // 仅当有选中项时才启用按钮
          onPressed: _selectedValues.isNotEmpty
              ? () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DisplayPage(selectedValues: _selectedValues),
                    ),
                  );
                }
              : null,
          child: const Text(
            "Add meal",
            style: TextStyle(color: Color.fromARGB(255, 247, 245, 245)),
          ),
        ),
      ),
      body: readAsync.when(
        data: (check) => ListView(
          children: check.map((e) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CheckboxListTile(
                  title: Text(e.checkbox1),
                  controlAffinity: ListTileControlAffinity.leading,
                  value: _selectedValues.contains(e.checkbox1),
                  onChanged: (value) {
                    if (value == true) {
                      _selectedValues.add(e.checkbox1);
                    } else {
                      _selectedValues.remove(e.checkbox1);
                    }
                    setState(() {}); // 更新UI刷新选中状态
                  },
                  contentPadding: EdgeInsets.zero,
                ),
                CheckboxListTile(
                  title: Text(e.checkbox2),
                  controlAffinity: ListTileControlAffinity.leading,
                  value: _selectedValues.contains(e.checkbox2),
                  onChanged: (value) {
                    if (value == true) {
                      _selectedValues.add(e.checkbox2);
                    } else {
                      _selectedValues.remove(e.checkbox2);
                    }
                    setState(() {}); // 更新UI刷新选中状态
                  },
                  contentPadding: EdgeInsets.zero,
                ),
              ],
            );
          }).toList(),
        ),
        error: (e, s) => Center(child: Text("$e")),
        loading: () => const Center(child: CircularProgressIndicator()), // 补充异步加载的loading状态
      ),
    );
  }
}

修正后的Display页面代码 #

class DisplayPage extends ConsumerStatefulWidget {
  const DisplayPage({
    Key? key,
    required this.selectedValues, // 统一接收所有选中值的列表
  }) : super(key: key);

  final List<String> selectedValues;
  static const String route = "/display";

  @override
  ConsumerState<DisplayPage> createState() => _DisplayPageState();
}

class _DisplayPageState extends ConsumerState<DisplayPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(title: Text("display")),
      body: Column(
        children: widget.selectedValues
            .map((value) => Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                  child: Text(value),
                ))
            .toList(),
      ),
    );
  }
}

关键改进点 #

• 用列表统一管理选中状态，避免多个零散变量导致的逻辑混乱
• 按钮仅在有选中项时可点击，严格符合"仅在Checkbox被选中后执行传值"的需求
• 移除强制解包操作，彻底避免空指针异常
• 目标页面通过列表统一接收并展示所有选中值，扩展性更强
• 补充了异步加载的loading状态，完善页面交互逻辑

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