尝试在 Flutter 中创建从一个小部件到另一个小部件的回调函数。不会成功的

Question

我正在尝试在 Flutter 中创建简单的“按按钮增加数字”程序。我将显示数字的文本小部件和增加数字的按钮分离到它们自己的类和文件中。然后我将它们导入到主文件中。

我正在尝试使用回调函数将两个小部件连接在一起以创建功能。 我没有显示任何错误，但按钮没有执行任何操作。

这是主要文件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              const SizedBox(width: 20,),
              AddButton(increaseNumberCallBack: (){},),
              const SizedBox(width: 20,),
              const Number(),
            ],
          ),
        )),
    );
  }

}

这是包含显示数字和增加数字的函数的文本小部件的文件：

import 'package:flutter/material.dart';

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

  @override
  State<Number> createState() => _NumberState();
}

class _NumberState extends State<Number> {

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


  int number = 0;

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

这是包含应该增加数字的按钮的文件以及我在制作回调函数方面的糟糕尝试：

import 'package:flutter/material.dart';

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

  final Function() increaseNumberCallBack;

  void increaseNumber() {
    increaseNumberCallBack();
  }

  @override
  State<AddButton> createState() => _AddButtonState();
}

class _AddButtonState extends State<AddButton> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        widget.increaseNumber();
      }, 
      icon: const Icon(Icons.add,
      size: 50,
      ));
  }
}

由于某种原因它不起作用。感谢您的帮助。

Answer 1

要修复 Flutter 中 Widget 之间的回调函数，您需要将

increaseNumber

Widget 中的

Number

函数连接到

AddButton

Widget。

1. 在

   MyApp

   小部件中，使用

   AddButton

   时，将回调函数传递给它：

AddButton(increaseNumberCallBack: _increaseNumber,)

2. 在

   _increaseNumber

   小部件中定义

   MyApp

   函数，该函数将更新

   Number

   小部件的状态：

void _increaseNumber() {
  setState(() {
    // Call the increaseNumber function from the Number widget
    _numberKey.currentState.increaseNumber();
  });
}

3. 您需要向

   GlobalKey

   小部件提供

   Number

   才能调用其方法。像这样定义

   GlobalKey

   ：

GlobalKey<_NumberState> _numberKey = GlobalKey();

4. 确保将此密钥传递给

   Number

   小部件：

const Number(key: _numberKey),