Dart-Flutter setState功能异常：性别切换按钮无法正常切换

你当前的问题在于每个GenderBox实例都独立维护自己的颜色状态，两个按钮的状态完全隔离。点击Male按钮时，只有这个按钮实例里的maleColor会变绿，但Female按钮实例的femaleColor还是原来的灰色；同理点击Female按钮时，Male按钮的状态也不会同步更新。

要实现两个按钮的联动切换，需要把选中状态提升到父组件，让父组件统一管理选中的性别，再把状态传递给两个GenderBox实例。具体步骤如下：

1. 将GenderBox改为无状态组件，接收性别、是否选中、点击回调三个参数
2. 创建父组件管理选中状态，根据选中状态控制每个按钮的颜色

修改后的完整代码 #

父组件（管理选中状态） #

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

  @override
  State<GenderSelector> createState() => _GenderSelectorState();
}

class _GenderSelectorState extends State<GenderSelector> {
  String? selectedGender; // 父组件维护选中状态

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 传递选中状态和点击回调给Male按钮
        GenderBox(
          gender: 'male',
          isSelected: selectedGender == 'male',
          onTap: () {
            setState(() {
              selectedGender = 'male';
            });
          },
        ),
        const SizedBox(width: 20),
        // 传递选中状态和点击回调给Female按钮
        GenderBox(
          gender: 'female',
          isSelected: selectedGender == 'female',
          onTap: () {
            setState(() {
              selectedGender = 'female';
            });
          },
        ),
      ],
    );
  }
}

修改后的GenderBox（无状态组件） #

class GenderBox extends StatelessWidget {
  final String gender;
  final bool isSelected;
  final VoidCallback onTap;

  const GenderBox({
    super.key,
    required this.gender,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    // 根据是否选中设置颜色
    final color = isSelected ? Colors.green : Colors.black54;

    return TextButton(
      onPressed: onTap,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          gender == 'female'
              ? FaIcon(FontAwesomeIcons.venus, size: 40, color: color)
              : FaIcon(FontAwesomeIcons.mars, size: 40, color: color),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              gender == 'female' ? 'Female' : 'Male',
              style: TextStyle(fontSize: 25, color: color),
            ),
          ),
        ],
      ),
    );
  }
}

代码说明 #

• 父组件GenderSelector维护selectedGender状态，点击任何一个按钮时更新这个状态
• 每个GenderBox通过isSelected参数判断自己是否被选中，从而显示对应的颜色
• 颜色逻辑统一在GenderBox中处理，避免重复代码

这样点击Male按钮时，它会变绿，Female按钮自动变灰；点击Female按钮时则相反，完美实现切换效果。

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