Flutter BMI计算器：颜色切换失效+ParentDataWidget错误排查

1. 男女选择按钮颜色无法切换（布尔逻辑问题） #

常见错误点及修复：

• 未通过setState更新状态：Flutter需在setState回调内修改状态才会触发UI重建，直接修改布尔变量不会同步更新颜色。
• 布尔切换逻辑错误：比如点击男女按钮时未正确区分状态，错误地将两个按钮的点击事件都设置为同一个布尔值，导致颜色无法切换。

错误示例： #

bool isMaleSelected = true;

// 男按钮
GestureDetector(
  onTap: () {
    isMaleSelected = true; // 未用setState包裹，且女按钮点击也设为true，逻辑错误
  },
  child: Container(
    color: isMaleSelected ? Colors.blue : Colors.grey,
    child: Text("男"),
  ),
),
// 女按钮
GestureDetector(
  onTap: () {
    isMaleSelected = true;
  },
  child: Container(
    color: isMaleSelected ? Colors.grey : Colors.pink,
    child: Text("女"),
  ),
)

修复方案： #

在setState内正确更新对应布尔值，区分男女状态：

bool isMaleSelected = true;

// 男按钮
GestureDetector(
  onTap: () {
    setState(() {
      isMaleSelected = true;
    });
  },
  child: Container(
    color: isMaleSelected ? Colors.blue : Colors.grey[300],
    child: Text("男"),
  ),
),
// 女按钮
GestureDetector(
  onTap: () {
    setState(() {
      isMaleSelected = false;
    });
  },
  child: Container(
    color: !isMaleSelected ? Colors.pink : Colors.grey[300],
    child: Text("女"),
  ),
)

2. "Incorrect use of ParentDataWidget" 异常（Expanded组件错误） #

错误原因： #

Expanded是依赖Column/Row/Flex这类Flex布局分配空间的组件，它必须直接作为Flex布局的直接子节点。如果将Expanded嵌套在GestureDetector、Container、Padding等非Flex组件内部，父级无法处理Expanded的空间分配请求，就会抛出该异常。

错误示例： #

Column(
  children: [
    GestureDetector(
      child: Expanded( // 错误：Expanded父组件是GestureDetector，不是Column
        child: Container(color: Colors.blue),
      ),
    ),
  ],
)

修复方案： #

将Expanded直接作为Column/Row的子组件，交互类组件放在Expanded内部：

Column(
  children: [
    Expanded(
      child: GestureDetector(
        child: Container(color: Colors.blue),
      ),
    ),
  ],
)

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