Flutter跨Widget回调失效：点击按钮无法增加数值问题求助

问题原因 #

• 主文件中给AddButton传入的increaseNumberCallBack是空函数(){}, 点击按钮后没有执行任何实际的数值增加逻辑。
• Number组件的数值状态和increaseNumber方法封装在其内部的_NumberState类中，外部组件无法直接访问这个方法，导致回调无法关联到正确的数值更新逻辑。

修复步骤 #

1. 将主组件改为StatefulWidget，统一管理数值状态 #

把MyApp从StatelessWidget改成StatefulWidget，在父组件中维护数值变量和更新方法，同时给AddButton传递回调、给Number传递当前数值。

修改后的主文件代码：

import 'package:flutter/material.dart';
import 'package:searchbartest/number.dart';
import 'package:searchbartest/button.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int number = 0;

  void increaseNumber() {
    setState(() {
      number++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              const SizedBox(width: 20),
              AddButton(increaseNumberCallBack: increaseNumber),
              const SizedBox(width: 20),
              Number(currentNumber: number),
            ],
          ),
        ),
      ),
    );
  }
}

2. 修改Number组件，接收外部传递的数值 #

让Number不再自行维护状态，改为接收外部传入的数值进行显示：

修改后的number.dart代码：

import 'package:flutter/material.dart';

class Number extends StatelessWidget {
  final int currentNumber;

  const Number({super.key, required this.currentNumber});

  @override
  Widget build(BuildContext context) {
    return Text(
      currentNumber.toString(),
      style: const TextStyle(fontSize: 50.0),
    );
  }
}

3. 简化AddButton组件（可选） #

直接在按钮的onPressed中调用回调，去掉多余的封装方法：

修改后的button.dart代码：

import 'package:flutter/material.dart';

class AddButton extends StatelessWidget {
  final Function() increaseNumberCallBack;

  const AddButton({super.key, required this.increaseNumberCallBack});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: increaseNumberCallBack,
      icon: const Icon(Icons.add, size: 50),
    );
  }
}

完成以上修改后，点击按钮会触发父组件的数值更新逻辑，同步传递给Number组件显示，功能即可正常运行。

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