Flutter中如何通过子StatefulWidget布尔值更新父组件计数器

要实现子组件的布尔值向上传递并更新父组件计数器，核心就是用回调函数——父组件把一个处理数据的函数传给子组件，子组件触发事件时调用这个函数并把数据传回去，父组件拿到数据后更新自己的状态。下面是具体实现步骤：

1. 修改子组件，添加回调参数 #

首先给Button组件的StatefulWidget类增加一个回调属性，用来接收父组件传过来的处理函数：

class Button extends StatefulWidget {
  // 定义回调函数，参数为布尔值
  final Function(bool) onButtonPressed;
  
  const Button({Key? key, required this.onButtonPressed}) : super(key: key);

  @override
  State<Button> createState() => _ButtonState();
}

然后在子组件的点击事件里，更新自身状态后调用回调函数，把最新的布尔值传递出去：

class _ButtonState extends State<Button> {
  bool buttonPressed = false;
  
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          buttonPressed = !buttonPressed;
          print(buttonPressed);
          // 调用父组件传入的回调，传递当前布尔值
          widget.onButtonPressed(buttonPressed);
        });
      },
      child: Container(
        color: Colors.white, // 替换未定义的kWhite为标准色值
        height: 50,
        width: 50,
      ),
    );
  }
}

2. 修改父组件，实现回调逻辑并传递给子组件 #

在父组件的状态类里添加处理子组件数据的方法，同时把这个方法传给子组件：

class ParentWidget extends StatefulWidget {
  const ParentWidget({Key? key}) : super(key: key);

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int counter = 0; // 变量名改为小写，符合Dart命名规范

  // 处理子组件传过来的布尔值，更新计数器
  void _updateCounter(bool isPressed) {
    setState(() {
      // 自定义更新逻辑：比如按下按钮加1，松开减1
      if (isPressed) {
        counter += 1;
      } else {
        counter -= 1;
      }
      // 如果需要每次切换状态都加1，直接写 counter +=1; 即可
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 添加文本显示当前计数器值
            Text('计数器: $counter', style: TextStyle(fontSize: 20)),
            SizedBox(height: 100),
            // 将回调方法传递给子组件
            Button(onButtonPressed: _updateCounter),
          ],
        ),
      ),
    );
  }
}

核心原理拆解 #

• 父组件通过Button的构造参数，把自己的_updateCounter方法传给子组件的onButtonPressed属性。
• 子组件点击按钮时，先更新自身的buttonPressed状态，再调用widget.onButtonPressed(buttonPressed)，把布尔值传递给父组件的处理方法。
• 父组件的_updateCounter方法通过setState更新counter，触发父组件重建，从而刷新UI显示最新的计数器数值。

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