Flutter实现勾选Checkbox后显示对应TextFormField的技术求助

需求说明 #

当用户勾选任意Checkbox时，需在该Checkbox下方显示一个TextFormField，用于输入单元配置。

示例 #

勾选“1 BHK”时，其下方显示TextFormField；勾选“2 BHK”时，对应下方也显示TextFormField，以此类推。

现有代码 #

import 'package:flutter/material.dart';

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

  @override
  State<CheckBoxes> createState() => _CheckBoxesState();
}

class _CheckBoxesState extends State<CheckBoxes> {
  static List<String> selectedOptions = [];
  List<CheckboxListTile>? bhkOptions;

  @override
  void initState() {
    super.initState();
    selectedOptions = [];
  }

  @override
  Widget build(BuildContext context) {
    bhkOptions = [
      CheckboxListTile(
        title: Text('1 BHK'),
        value: selectedOptions.contains('1 BHK'),
        onChanged: (bool? value) {
          setState(() {
            if (value!) {
              selectedOptions.add('1 BHK');
            } else {
              selectedOptions.remove('1 BHK');
            }
          });
        },
      ),
      CheckboxListTile(
        title: Text('2 BHK'),
        value: selectedOptions.contains('2 BHK'),
        onChanged: (bool? value) {
          setState(() {
            if (value!) {
              selectedOptions.add('2 BHK');
            } else {
              selectedOptions.remove('2 BHK');
            }
          });
        },
      ),
      CheckboxListTile(
        title: Text('3 BHK'),
        value: selectedOptions.contains('3 BHK'),
        onChanged: (bool? value) {
          setState(() {
            if (value!) {
              selectedOptions.add('3 BHK');
            } else {
              selectedOptions.remove('3 BHK');
            }
          });
        },
      ),
      CheckboxListTile(
        title: Text('4 BHK'),
        value: selectedOptions.contains('4 BHK'),
        onChanged: (bool? value) {
          setState(() {
            if (value!) {
              selectedOptions.add('4 BHK');
            } else {
              selectedOptions.remove('4 BHK');
            }
          });
        },
      ),
      CheckboxListTile(
        title: Text('5+ BHK'),
        value: selectedOptions.contains('5+ BHK'),
        onChanged: (bool? value) {
          setState(() {
            if (value!) {
              selectedOptions.add('5+ BHK');
            } else {
              selectedOptions.remove('5+ BHK');
            }
          });
        },
      ),
    ];

    return Column(
      children: bhkOptions!,
    );
  }
}

要实现勾选Checkbox后下方显示对应输入框的需求，可按以下方式修改代码：

1. 用Map存储每个BHK选项的勾选状态，同时为每个选项绑定独立的输入控制器，替代原有的列表管理方式，逻辑更清晰易维护。
2. 将每个Checkbox和对应的TextFormField包装在同一Column中，根据勾选状态控制输入框的显示/隐藏。
3. 移除不必要的静态变量，避免状态污染。

修改后的完整代码：

import 'package:flutter/material.dart';

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

  @override
  State<CheckBoxes> createState() => _CheckBoxesState();
}

class _CheckBoxesState extends State<CheckBoxes> {
  // 存储每个BHK选项的勾选状态
  final Map<String, bool> _bhkChecked = {
    '1 BHK': false,
    '2 BHK': false,
    '3 BHK': false,
    '4 BHK': false,
    '5+ BHK': false,
  };
  // 存储每个BHK对应的输入框内容控制器
  final Map<String, TextEditingController> _controllers = {};

  @override
  void initState() {
    super.initState();
    // 为每个BHK选项初始化输入控制器
    _bhkChecked.keys.forEach((key) {
      _controllers[key] = TextEditingController();
    });
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _controllers.values.forEach((controller) => controller.dispose());
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: _bhkChecked.entries.map((entry) {
        final bhkType = entry.key;
        final isChecked = entry.value;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CheckboxListTile(
              title: Text(bhkType),
              value: isChecked,
              onChanged: (bool? value) {
                setState(() {
                  _bhkChecked[bhkType] = value ?? false;
                });
              },
            ),
            // 根据勾选状态显示/隐藏输入框
            if (isChecked)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 48.0, vertical: 8.0),
                child: TextFormField(
                  controller: _controllers[bhkType],
                  decoration: InputDecoration(
                    hintText: '请输入${bhkType}的单元配置',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
          ],
        );
      }).toList(),
    );
  }
}

代码说明 #

• 用Map<String, bool>管理勾选状态，无需判断列表包含关系，操作更高效直接。
• 每个输入框绑定独立控制器，支持单独获取或修改对应BHK的配置内容。
• 在dispose方法中销毁控制器，避免内存泄漏问题。
• 输入框添加缩进样式，与Checkbox对齐，提升布局美观度。

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