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

Question

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

我有两个文件 main.dart 和 block.dart。我的目标是向 block.dart 中的 myCallback 添加一个整数（例如 12），以便在 [ 中使用它=37=] 在函数 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,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

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

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

  Block({this.myCallback});

当你调用它时，你为它提供参数

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

最后您可以从主

访问它

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

Answer 2

在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,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

简单的方法，没有任何高级主题。最好阅读一些有关状态管理的文章。 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,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 4

我将更多信息添加到。

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

typedef OnWhatToDoCallback = Function(int value);

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

  final OnWhatToDoCallback onWhatToDo;
  ...
}

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

Flutter How to pass a parameter (int) to callbacks?

callback

dart

flutter