Flutter 如何将参数（int）传递给回调？答案

【问题标题】：Flutter How to pass a parameter (int) to callbacks?Flutter 如何将参数（int）传递给回调？
【发布时间】：2021-10-05 09:36:00
【问题描述】：

如何在 Flutter 中通过回调传递参数？

我有两个文件 main.dart 和 block.dart。我的目标是在 block.dart 中的 myCallback 中添加一个 int（例如 12），以便在函数 main.dart 中使用它whatToDo（而不是print ('Should receive the Value from myCallback');）

这是 main.dart 文件的代码：

import 'package:flutter/material.dart';
import 'block.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainBlock(),
    );
  }
}

class MainBlock extends StatefulWidget {
  @override
  _MainBlockState createState() => _MainBlockState();
}

class _MainBlockState extends State<MainBlock> {
  void whatToDo() {
    print('Should receive the Value from myCallback');
  }

  @override
  Widget build(BuildContext context) {
    // print(getraenke.asMap());
    // print(getraenke.asMap().keys);
    // print(getraenke);

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30.0),
        color: Color(0xFF122C39),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Block(
                myCallback: whatToDo,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是来自 block.dart 的代码，带有回调：

import 'package:flutter/material.dart';

class Block extends StatelessWidget {
  final Function myCallback;

  Block({this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      color: Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: myCallback,
          child: Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart callback

【解决方案1】：

如果我理解正确，你希望你的函数接受一个参数。这样做。

class Block extends StatelessWidget {
  final Function(int num) myCallback;

  Block({this.myCallback});

当你调用它的时候，你给它提供了参数

GestureDetector(
          onTap:()=> myCallback(12),
          child: ...

最后你可以从你的 main 访问它

void whatToDo(int num) {
    print(num);
  }

【讨论】：

【解决方案2】：

没有任何高级主题的简单方法。最好阅读一些关于状态管理的文章。 Official documentation.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainBlock(),
    );
  }
}

class MainBlock extends StatefulWidget {
  @override
  _MainBlockState createState() => _MainBlockState();
}

class _MainBlockState extends State<MainBlock> {
  void whatToDo(int value) {
    print('Should receive the Value from myCallback');
    print(value);
  }

  @override
  Widget build(BuildContext context) {
    // print(getraenke.asMap());
    // print(getraenke.asMap().keys);
    // print(getraenke);

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30.0),
        color: Color(0xFF122C39),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Block(
                myCallback: whatToDo,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Block extends StatelessWidget {
  final void Function(int) myCallback;

  Block({required this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      color: Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: ()=>myCallback(12),
          child: Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

哦，感谢您提供有关状态管理的阅读提示。我已经通读了一遍，我必须开始学习和理解它。非常有趣和有前途。

【解决方案3】：

在 main.dart 中：

  void whatToDo(int value) {
    print('the value is $value');
  }

在 block.dart 中：

class Block extends StatelessWidget {
  final ValueChanged<int> myCallback;

  Block({required this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10.0),
      color: const Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: () => myCallback(100),
          child: const Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

如果您添加一些解释，您可能会更容易获得支持，因为您提高了答案质量。

【解决方案4】：

我将更多信息添加到Ethsan Askari's answer。

您可以定义自定义回调并在整个应用程序中重复使用它。

typedef OnWhatToDoCallback = Function(int value);

class Block extends StatefulWidget {
  const Block({
    Key? key,
    required this.onWhatToDo,
  }) : super(key: key);

  final OnWhatToDoCallback onWhatToDo;
  ...
}

【讨论】：