Wie man VoidCallback und Function(x) Callbacks zur Kommunikation zwischen Widgets in Flutter verwendet

In Flutter kann die Kommunikation zwischen Widgets VoidCallback und Function Callback verwenden.

VoidCallbacks sind Rückrufe, die keinen Wert an das Parent Widget zurückgeben. Dies ist nützlich, wenn wir das Parent Widget nur über Ereignisse informieren wollen, die im Child Widget aufgetreten sind.

Die Funktion Callback ist ein Rückruf, der das übergeordnete Widget über ein Ereignis informiert, das im untergeordneten Widget auftritt, und der auch einen Wert an das übergeordnete Widget zurückgibt.

typedef VoidCallback = void Function();

VoidCallbacks und Function Callbacks sind beides Funktionen. Der einzige Unterschied ist, dass VoidCallback keine Argumente hat und keine Daten zurückgibt.

In diesem Artikel wird Bardimin ein einfaches Beispiel für die Verwendung von VoidCallback und Function Callback in einer einfachen Anwendung geben

1. Erstellen Sie ein neues Flutter-Projekt

In einem ersten Schritt erstellen Sie ein neues Flutter-Projekt mit Android Studio. Sie können sich die Integration von Flutter und Android Studio in dem Artikel How to Easily Install Flutter on Android Studio and Windows.

Sobald das neue Projekt erstellt ist, werden wir die Beispieldatei ändern, um eine einfache Anwendung zu erstellen, die VoidCallback und Function Callback verwendet.

In der Datei „main.dart“ wie folgt ändern.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ParentWidgetPage(title: 'Flutter VoidCallback & Function Callback'),
    );
  }
}

2. Ein übergeordnetes Widget erstellen

Erstellen Sie dann eine neue Datei mit dem Namen „parent_widget.dart“. In dieser Datei werden wir die Funktionen „_voidCallback“ und „_functionCallback“ erstellen, die wir vom Child-Widget aus aufrufen werden.

Wir werden die Funktion „_voidCallback“ mit „VoidCallback“ aufrufen.

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

Wir werden die Funktion „_functionCallback(int i)“ mit Parametern über „Function(x) Callback“ aufrufen.

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

Die Datei „parent_widget.dart“, die wir erstellt haben, ist wie folgt vollständig.

import 'package:flutter/material.dart';
import 'voidcallback_child_widget.dart';
import 'function_child_widget.dart';

class ParentWidgetPage extends StatefulWidget {
  const ParentWidgetPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<ParentWidgetPage> createState() => _ParentWidgetPageState();
}

class _ParentWidgetPageState extends State<ParentWidgetPage> {
  int _counter = 0;

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

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            VoidChildWidgetPage(voidCallback: _voidCallback),
            FunctionChildWidgetPage(functionCallback: _functionCallback),
          ],
        ),
      ),
    );
  }
}

3. Ein VoidCallback Child-Widget erstellen

Als nächstes erstellen Sie die Datei „voidcallback_child_widget.dart“. In dieser Datei werden wir eine Schaltfläche erstellen, die die Funktion „_voidCallback“ in der Datei „parent_widget.dart“ aufruft.

import 'package:flutter/material.dart';

class VoidChildWidgetPage extends StatelessWidget {
  final VoidCallback voidCallback;

  const VoidChildWidgetPage({Key? key, required this.voidCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => voidCallback(),
      child: const Text("Void Callback"),
    );
  }
}

4. Ein untergeordnetes Widget mit Funktionsrückruf erstellen

Erstellen Sie dann eine Datei „function_ child_widget.dart“. Genau wie zuvor werden wir auch in dieser Datei eine Schaltfläche erstellen, die die Funktion „_functionCallback(int i)“ in der Datei „parent_widget.dart“ aufruft, die einen Integer-Wert zurückgibt.

import 'package:flutter/material.dart';

class FunctionChildWidgetPage extends StatelessWidget {
  final Function(int) functionCallback;

  const FunctionChildWidgetPage({Key? key, required this.functionCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => functionCallback(5),
      child: const Text("Fx Callback"),
    );
  }
}

Starten Sie dann das Projekt. Auf dem Emulator sehen Sie, dass es zwei Schaltflächen gibt, nämlich die Schaltflächen „VoidCallback“ und „Fx Callback“.

Wenn Sie auf die Schaltfläche „VoidCallback“ klicken, ruft das Child-Widget „VoidCallback“ einfach die Funktion „_voidCallback“ des Parent-Widgets auf und gibt keinen Wert zurück.

Wenn Sie in der Zwischenzeit auf die Schaltfläche „Fx Callback“ klicken, ruft das Child-Widget „Function Callback“ die Funktion „_functionCallback(int i)“ des Parent-Widgets auf, indem es einen Integer-Wert zurückgibt.