在 Flutter 中以函数作为参数调用小部件

Question

我正在尝试调用一个将函数作为参数的自定义小部件，但是我不知道可以为其分配什么参数。我已经测试了我想出的所有想法，但没有成功。这个想法是我从教程中获得的，但是我做了一些不同的事情，因为我有不同的要求。这是我的代码：

import 'package:flutter/material.dart';

class NewTransaction extends StatelessWidget {
  final Function addTx;
  const NewTransaction({Key? key, required this.addTx}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('I cant solve this problem');
  }
}

============================================= ===========================

import 'package:flutter/material.dart';
import 'package:function_parameter_problem/new_transaction.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NewTransaction(
                addTx:
                    addTx), // What parameter can/should I pass here? It is crucial for my project
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Edit: 好的，但是假设 NewTransaction() 函数返回带有 appbar 等的脚手架，我必须再次调用它，但是在以下情况下:

_wykonajZapytanie() { //function called onPressed in the main window
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NewTransaction()),
    ); /*I have to put a parameter here, but I just want to display another window, I don't know why, but I just can't get any ideas*/
  }

重要提示在原来的项目中，如果涉及到我提供的第一个例子，我不会在主class，但在 UserTransaction class.

tldr 我需要 assemble 主 class 中的一个可扩展列表 - 据我所知，这可以按照下面的方式完成，但也我需要在按钮的 onPressed 上的主要 class 中调用此函数以显示所有文本字段等

import 'package:flutter/material.dart';
import './new_transaction.dart';
import './transaction_list.dart';
import '../models/transaction.dart';

class UserTransaction extends StatefulWidget {
  @override
  _UserTransactionState createState() => _UserTransactionState();
}

class _UserTransactionState extends State<UserTransaction> {
  final List<Transaction> _userTransactions = [
    Transaction(
        id: 1,
        date: DateTime.now(),
        numTel: 911911911,
        // scoring: 'Link wygasł',
        user: 'Polizei pau pau'),
    Transaction(
        id: 2,
        date: DateTime.now(),
        numTel: 911911911,
        // scoring: 'Link wygasł',
        user: 'Tha police')
  ];

  void _addNewTransaction(int txNumTel, /* String txScoring,*/ String txUser) {
    final newTx = Transaction(
      numTel: txNumTel,
      /*scoring: txScoring,*/
      user: 'PLZ WORK',
      date: DateTime.now(),
      id: 3,
    );
    setState(() {
      _userTransactions.add(newTx);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      NewTransaction(_addNewTransaction),
    ]);
  }
}

Answer 1

如果我没有正确理解你的问题，那么你可以通过以下方式传递带参数的函数：

import 'package:flutter/material.dart';

class NewTransaction extends StatelessWidget {
  final Function() addTx;
  const NewTransaction({Key? key, required this.addTx}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('I cant solve this problem');
  }
}

传递此函数时，请确保按如下方式传递：NewTransaction(addTx: () => addTx());。如果你像这样传递它：NewTransaction(addTx: addTx()); 函数会立即被调用。

Answer 2

import 'package:flutter/material.dart';

class NewTransaction extends StatelessWidget {
  final VoidCallback function; 
  //if nothing returns
  //else typedef CustomFunc = Function(int param); (replace int with your data type)
  const NewTransaction({Key? key, required this.function}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
            child: Text('I cant solve this problem'),
            onTap:function,
            //if custom 
            //onTap: (){
            // function(params);
            //}
          );
  }
}

Call like below...

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NewTransaction(
                function: (){
                    //todo  
                  },
                //if custome function: (params){ todo },
                )
          ],
        ),
      ),

Answer 3

当你说Function addTx时，这意味着可以传递任何函数。如果 Function() addTx 表示没有参数的函数。如果 Function(int) addTx 表示函数具有一个必需的位置参数整数。如果 void Function() addTx 表示函数没有参数并且 return 类型应该是 void。

在flutter中你也可以使用 VoidCallback 基本上是 void Function() 这样写的 final VoidCallback addTd。 . 或者可以使用 ValueChanged<T> 基本上是 void Function(T value)

更多信息请访问： https://dart.dev/guides/language/language-tour#functions

在 Flutter 中以函数作为参数调用小部件

Calling a widget with a function as a parameter in Flutter

parameters

function

widget

flutter