Flutter ExpTile按钮禁用+回调异常：未点击却自动执行且值未更新

核心问题分析 #

1. 按钮自动触发且禁用：自定义ExpTile里的ElevatedButton的onPressed直接写了callbackFunction(val)，这会在组件build时立即执行回调，而非点击时触发；同时因为callbackFunction(val)返回void，导致onPressed被赋值为null，按钮因此禁用。
2. 回调逻辑偏离需求：原callback函数直接重置传入的参数为0再加1，只更新全局val变量，完全没关联到defense，不符合“给对应变量加1”的需求。
3. defense变量未初始化也未更新：defense仅声明为int? defense;，没有初始值，且回调里从未处理它，所以始终为null。

具体修改步骤 #

1. 修正自定义ExpTile组件

把回调参数改为VoidCallback，并修正onPressed的赋值方式，确保点击时才触发：

import 'package:flutter/material.dart';

class ExpTile extends StatelessWidget {
  final String name;
  final VoidCallback onPressed; // 改用VoidCallback更贴合按钮点击逻辑
  final List<Widget> children;
  final int val; // 改为非空，由父组件处理null情况

  const ExpTile({
    required this.name,
    this.children = const <Widget>[],
    required this.onPressed,
    required this.val,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ExpansionTile(
        title: ElevatedButton(
          onPressed: onPressed, // 直接传递函数引用，点击才执行
          child: Row(
            children: [Text(name), Text(' ${val.toString()}')],
          ),
        ),
        children: children,
      ),
    );
  }
}

2. 修正父组件逻辑

初始化defense变量，给每个ExpTile绑定对应的变量更新逻辑：

int? defense = 0; // 初始化defense，也可根据需求设为null后用??处理
int val = 0;

@override
Widget build(BuildContext context) {
  var sliderValue = 0.0; // 重命名避免和变量冲突
  print(val);
  return ListView(
    children: <Widget>[
      const SizedBox(height: 45),
      const Center(child: Text("Data", style: ThemeText.progressFooter)),
      const SizedBox(height: 10),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFormField(
          decoration: textInputDecoration.copyWith(hintText: "Name"),
          onChanged: (_) => setState(() {}),
        ),
      ),
      const SizedBox(height: 10),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFormField(
          decoration: textInputDecoration.copyWith(hintText: "Tank"),
          onChanged: (_) => setState(() {}),
        ),
      ),
      const SizedBox(height: 10),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFormField(
          decoration: textInputDecoration.copyWith(hintText: "Field"),
          onChanged: (_) => setState(() {}),
        ),
      ),
      const SizedBox(height: 45),
      ExpansionTile(
        title: const Text("Character"),
        children: [
          Text(Intensity), // 确保Intensity是已定义的变量
          Slider(
            value: sliderValue,
            onChanged: (newValue) => setState(() => sliderValue = newValue), // 修复Slider更新逻辑
          ),
          ExpTile(
            name: "Defense",
            val: defense ?? 0, // 处理defense为null的情况，显示0
            onPressed: () {
              setState(() {
                defense = (defense ?? 0) + 1; // 给defense加1
              });
            },
            children: [],
          ),
          // 如果需要给val变量加1的按钮，可添加如下ExpTile
          ExpTile(
            name: "Val",
            val: val,
            onPressed: () {
              setState(() {
                val += 1;
              });
            },
            children: [],
          ),
        ],
      ),
    ],
  );
}

额外优化说明 #

• 把原value变量重命名为sliderValue，避免和回调参数、其他变量重名导致混淆。
• TextFormField的onChanged参数用_代替val，避免和全局变量val冲突。
• 每个ExpTile的点击逻辑独立，直接绑定对应变量的更新，逻辑更清晰，不会出现变量混淆的问题。

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