Flutter BMI应用中GenderWidget选中状态颜色修改实现问题

你需要通过给GenderWidget添加选中状态参数，结合父组件的状态管理实现点击时的颜色差异标记，具体修改步骤如下：

1. 修改GenderWidget组件 #

给组件新增isSelected布尔参数，用来判断当前性别是否被选中，再在UI元素中根据该参数切换样式：

class GenderWidget extends StatelessWidget {
  final VoidCallback onclick;
  final String title;
  final IconData icon;
  // 新增选中状态参数
  final bool isSelected;

  GenderWidget({
    required this.onclick,
    required this.title,
    required this.icon,
    required this.isSelected, // 初始化参数
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onclick,
      child: Container(
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              title,
              style: mytextgender,
            ),
            Icon(
              icon,
              // 根据isSelected切换图标颜色
              color: isSelected ? Colors.red : Colors.black,
              size: 80,
            ),
            SizedBox(
              height: 20,
              // 根据isSelected显示选中提示
              child: isSelected ? const Text('Selected') : null,
            )
          ],
        )),
      ),
    );
  }
}

2. 修改父组件的调用逻辑 #

在父组件中，将maleselected和femaleselected变量分别传给对应GenderWidget的isSelected参数，确保状态更新后UI同步刷新：

Row(
  children: [
    Expanded(
        child: MyContainer(
      child: GenderWidget(
        onclick: () {
          maleselected = true;
          femaleselected = false;
          setState(() {}); // 触发UI刷新
        },
        title: 'Male',
        icon: Icons.male,
        isSelected: maleselected, // 传递男性选中状态
      ),
    )),
    Expanded(
        child: MyContainer(
      child: GenderWidget(
        onclick: () {
          maleselected = false;
          femaleselected = true;
          setState(() {}); // 触发UI刷新
        },
        title: 'Female',
        icon: Icons.female,
        isSelected: femaleselected, // 传递女性选中状态
      ),
    )),
  ],
)

效果说明 #

点击任意性别选项时，父组件会更新对应的布尔变量并调用setState刷新UI，GenderWidget会根据传入的isSelected参数自动切换图标颜色和显示选中提示，实现选中状态的视觉标记。

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