Flutter复选框弹出/收起键盘时状态重置问题求助

你的问题核心是复选框状态没有持久化保存：每次键盘唤起/收起触发页面重建时，FutureBuilder的builder会重新执行，而你在itemBuilder里每次都新建CheckboxModal实例（默认value=false），导致之前勾选的状态全部丢失。

具体修复步骤： #

1. 把复选框状态列表存到父组件的State中

在你的页面State类里添加状态变量，并在初始化时从API获取数据生成列表：

class _YourPageState extends State<YourPage> {
  List<CheckboxModal> _checkboxList = [];

  @override
  void initState() {
    super.initState();
    _initCheckboxData();
  }

  Future<void> _initCheckboxData() async {
    // 调用API获取分类数据
    final categories = await fetchCategories();
    setState(() {
      // 把分类数据转换成CheckboxModal列表并保存
      _checkboxList = categories
          .map((category) => CheckboxModal(title: category.type))
          .toList();
    });
  }

  // ...其他代码
}

2. 替换FutureBuilder，直接用State中的列表构建复选框

去掉原来的FutureBuilder，改用State里保存的_checkboxList来渲染列表，避免每次重建都生成新的CheckboxModal：

// 替换原FutureBuilder部分的代码
_checkboxList.isEmpty
    ? const Center(child: CircularProgressIndicator()) // 加载状态
    : ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: _checkboxList.length,
        itemBuilder: (context, index) =>
            buildingSingleCheckbox(_checkboxList[index], index),
      )

3. 修改单个复选框的状态更新逻辑

让复选框的勾选状态直接更新State里的列表项，确保状态被持久化：

Widget buildingSingleCheckbox(CheckboxModal select, int index) {
  return CheckboxListTile(
    value: select.value,
    title: Text(select.title!),
    onChanged: (value) {
      setState(() {
        // 更新State中对应项的状态
        _checkboxList[index].value = value!;
      });
    },
  );
}

补充说明 #

键盘唤起/收起会改变屏幕尺寸，Flutter默认会触发页面重建。如果你的状态没有存在State中，而是在build方法里临时创建，就会随重建丢失。把状态绑定到组件的State生命周期中，就能保证状态不会被重置。

内容的提问来源于stack exchange，提问作者Nguyen Van Bao Khuong K15 HCM