Flutter中GestureDetector点击未按预期工作的修复方法

你的代码存在5处核心错误，逐一修复后即可正常运行：

• 条件判断参数写错：updateColor方法内判断条件写为if (int == 1)，int是类型关键字不是入参，条件永远无法命中
• 赋值运算符写错：所有给颜色变量赋值的位置都误用了比较运算符==，没有实际修改变量值
• 组件名拼写错误：Flutter内置容器组件为Container，你写的Contain是不存在的组件，会导致渲染报错
• 女性卡片未绑定点击事件：当前仅男性卡片包裹了GestureDetector，点击女性卡片无响应
• 互斥逻辑缺失：选中某一性别时没有把另一性别的卡片重置为未激活状态，且女性卡片的选中逻辑完全缺失

修复步骤 #

1. 修正updateColor方法的判断逻辑，将入参判断改为匹配传入的性别参数
2. 将所有颜色赋值处的==替换为赋值运算符=，实际更新颜色变量值
3. 将错误的Contain组件替换为内置Container组件，对应传入color、child属性
4. 给女性卡片也包裹GestureDetector，点击时传入对应参数触发更新
5. 补全选中互斥逻辑：选中任意性别时，将另一性别的卡片颜色重置为未激活色

修复后完整可运行代码 #

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

// 提前定义激活、未激活卡片颜色，可根据你的需求调整色值
const Color activeCardColor = Color(0xFF1D1E33);
const Color inactiveCardColor = Color(0xFF111328);

// 你的原有IconWidget组件保持不变即可
class IconWidget extends StatelessWidget {
  final IconData i;
  final String s;
  const IconWidget({super.key, required this.i, required this.s});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(i, size: 80),
        const SizedBox(height: 15),
        Text(s, style: const TextStyle(fontSize: 18, color: Color(0xFF8D8E98)))
      ],
    );
  }
}

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

  @override
  State<GenderCardPage> createState() => _GenderCardPageState();
}

class _GenderCardPageState extends State<GenderCardPage> {
  Color maleCardColor = inactiveCardColor;
  Color femaleCardColor = inactiveCardColor;

  void updateColor(int selectedGender) {
    if (selectedGender == 1) {
      maleCardColor = activeCardColor;
      femaleCardColor = inactiveCardColor;
    } else {
      femaleCardColor = activeCardColor;
      maleCardColor = inactiveCardColor;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFF0A0E21),
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            updateColor(1);
                          });
                        },
                        child: Container(
                          margin: const EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            color: maleCardColor,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: const IconWidget(
                            i: FontAwesomeIcons.mars,
                            s: 'MALE',
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            updateColor(2);
                          });
                        },
                        child: Container(
                          margin: const EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            color: femaleCardColor,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: const IconWidget(
                            i: FontAwesomeIcons.venus,
                            s: 'FEMALE',
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外注意：如果修复后仍存在点击无响应问题，检查子组件是否设置了HitTestBehavior拦截事件，正常情况下GestureDetector直接包裹Container可正常响应点击；另外Material组件根节点建议嵌套Scaffold，避免主题、点击区域异常。

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