📜  Flutter – 使用回调函数

📅  最后修改于: 2021-09-02 05:53:18             🧑  作者: Mango

在本文中,我们将看到如何在flutter使用回调函数。我们将学习在flutter实现回调函数的不同方法。

回调基本上是一个函数或方法,我们将其作为参数传递给另一个函数或方法以执行操作。简而言之,我们可以说在从一种方法向另一种方法发送数据时使用了 Callback 或 VoidCallback,反之亦然。在整个flutter应用程序中保持连续的数据流非常重要。

假设您正在开发一个应用程序。这个应用程序显示某种数据。现在要更改应用程序中的值,您可以采用两种方法,使用各种状态更改技术更改状态或使用回调更改值。如果我们要使用回调函数,我们可以使用两种可能的方法,如下所示:

方法一:直接写回调

在这种方法中,我们只定义应该在特定事件发生时作为回调触发的函数。

例子:

Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        
      // appbar
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '$count',
            style: TextStyle(fontSize: 50.0),
          ),
          RaisedButton(
              
              // callback function
              // this increments the value 
              // by 1 each time the Raised button is pressed
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              child: Text(''
                  'increase'))
        ],
      ),
    );
  }
}


Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        
      // appbar
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  int count = 0;
    
  // callback function
  VoidCallback callBack() {
    setState(() {
      count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '$count',
            style: TextStyle(fontSize: 50.0),
          ),
          RaisedButton(
              
              // callback on Button press
              onPressed: callBack,
              child: Text(''
                  'increase'))
        ],
      ),
    );
  }
}


输出:

方法二:传递回调函数

在这种方法中,回调直接传递给事件。如下例所示, onPressed操作使前面部分代码中定义的直接回调函数。

例子:

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        
      // appbar
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Color.fromRGBO(15, 157, 88, 1),
      ),
      body: MyApp(),
    ),
  ));
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State {
  int count = 0;
    
  // callback function
  VoidCallback callBack() {
    setState(() {
      count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '$count',
            style: TextStyle(fontSize: 50.0),
          ),
          RaisedButton(
              
              // callback on Button press
              onPressed: callBack,
              child: Text(''
                  'increase'))
        ],
      ),
    );
  }
}

输出:

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!