Flutter实现单选按钮控制输入框的显示与隐藏

要实现选中"Yes"时显示输入区域、选中"No"时隐藏的效果，核心是通过条件渲染控制元素的显示/隐藏，同时修正单选按钮的状态逻辑。以下是关键修改点和完整实现代码：

关键修改说明 #

• 用_medicalhistory == "yes"作为判断条件，决定是否渲染提示文本、输入框和保存按钮
• 修正单选按钮的状态管理，确保选中"No"时可重置输入框内容（可选）
• 初始化TextEditingController来管理输入框内容
• 调整保存按钮逻辑，确保选中"Yes"时把输入内容存入_medicalhistory

完整实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<MedicalHistoryForm> createState() => _MedicalHistoryFormState();
}

class _MedicalHistoryFormState extends State<MedicalHistoryForm> {
  // 初始化单选状态为"no"，默认隐藏输入区域
  String _medicalhistory = "no";
  // 初始化输入框控制器
  final TextEditingController myController = TextEditingController();

  @override
  void dispose() {
    // 页面销毁时释放控制器资源
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width > 800 ? 700 : MediaQuery.of(context).size.width,
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                "Past medical history: ",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 14,
                    height: 1.5),
              ),
              RadioListTile(
                title: const Text("Yes"),
                value: "yes",
                groupValue: _medicalhistory,
                onChanged: (value) {
                  setState(() {
                    _medicalhistory = value!;
                  });
                },
              ),
              // 条件渲染：只有选中"Yes"时才显示输入相关元素
              if (_medicalhistory == "yes") ...[
                const Text(
                    "If yes, please share and describe the previous medical illness: "),
                const SizedBox(height: 5),
                TextField(
                  controller: myController,
                  maxLength: 1000,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    TextButton(
                        onPressed: () {
                          setState(() {
                            // 保存输入内容到_medicalhistory
                            _medicalhistory = myController.text;
                          });
                        },
                        child: const Text("Save")),
                  ],
                ),
              ],
              RadioListTile(
                title: const Text("No"),
                value: "no",
                groupValue: _medicalhistory,
                onChanged: (value) {
                  setState(() {
                    _medicalhistory = value!;
                    // 选中"No"时清空输入框
                    myController.clear();
                  });
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}

使用说明 #

• 将上述MedicalHistoryForm组件添加到你的页面中即可使用
• 选中"Yes"时，输入区域自动显示；选中"No"时，输入区域隐藏且输入框内容清空
• 点击"Save"按钮会将输入框内容保存到_medicalhistory变量中

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