Technologieaustausch

Mehrere Möglichkeiten für Flutter, eine teilweise Aktualisierung zu implementieren

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Inhaltsverzeichnis

Vorwort

1. Die Bedeutung der lokalen Aktualisierung

1. Konzept

2. Bedeutung

2. Mehrere Möglichkeiten zur Implementierung einer teilweisen Aktualisierung

1. Verwenden Sie die setState-Methode für eine teilweise Aktualisierung

2. Verwenden Sie StatefulWidget und InheritedWidget, um die Benutzeroberfläche teilweise zu aktualisieren

3.ValueNotifier und ValueListenableBuilder

4.StreamBuilder

5.Anbieter

6.GetX

7. Verwenden Sie GlobalKey

Vorwort

In Flutter bezieht sich die Statusverwaltung auf die Verwaltung und Aktualisierung des Datenstatus in der Anwendung sowie auf die Aktualisierung der Benutzeroberfläche entsprechend Statusänderungen. Eine effektive Zustandsverwaltung kann Entwicklern dabei helfen, effizientere und wartbarere Anwendungen zu erstellen.

setState ist die grundlegendste Statusverwaltungsmethode in Flutter. Wenn sich der Status ändert, wird das Framework benachrichtigt, um die Benutzeroberfläche neu zu erstellen. Natürlich wissen wir, dass die Seite beim Aufrufen der setState-Methode neu gezeichnet wird. Wenn das Seitenlayout komplexer ist, müssen wir zu diesem Zeitpunkt nur eine separate Benutzeroberfläche aktualisieren höhere Leistung. Verbrauchen, um die Benutzeroberfläche der aktuellen Seite neu zu zeichnen.

Welche Methoden gibt es in Flutter, um die Benutzeroberfläche teilweise zu aktualisieren? In diesem Blog werden verschiedene Möglichkeiten für Flutter aufgeführt, eine teilweise Aktualisierung zu implementieren.

1. Die Bedeutung der lokalen Aktualisierung

1. Konzept

Unter teilweiser Aktualisierung versteht man die Aktualisierung nur eines Teils der Benutzeroberfläche, nicht der gesamten Seite. Dies verbessert die Leistung und das Benutzererlebnis.

2. Bedeutung

  1. Vermeiden Sie unnötige Neuzeichnungen und verbessern Sie die Leistung
  2. Sorgen Sie für ein reibungsloseres Benutzererlebnis
  3. Reduzieren Sie den Ressourcenverbrauch

2. Mehrere Möglichkeiten zur Implementierung einer teilweisen Aktualisierung

1. Verwenden Sie die setState-Methode für eine teilweise Aktualisierung

setState ist die am häufigsten verwendete Zustandsverwaltungsmethode in Flutter. Sie wird verwendet, um das Framework über Zustandsänderungen zu informieren, die zu einer Schnittstellenrekonstruktion führen.

Wenn wir ein Flutter-Projekt erstellen, ist das Beispiel des vom System standardmäßig generierten Timers das Beispiel der teilweisen Aktualisierung von setState.

  1. import 'package:flutter/material.dart';
  2.  
  3. class SetStateMainPage extends StatefulWidget {
  4.   final String title;
  5.   const SetStateMainPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
  9. }
  10.  
  11. class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  12.   int _count = 0;
  13.  
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return Scaffold(
  17.       appBar: AppBar(
  18.         title: Text(widget.title),
  19.       ),
  20.       body: Center(
  21.         child: Text(
  22.           '您点击了$_count次',
  23.           style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  24.         ),
  25.       ),
  26.       floatingActionButton: FloatingActionButton(
  27.           child: const Icon(Icons.add),
  28.           onPressed: () {
  29.             setState(() {
  30.               _count++;
  31.             });
  32.           },
  33.       )
  34.     );
  35.   }
  36. }

Abbildung 1.setState-Teilaktualisierung

Wenn die Seite relativ einfach ist, können Sie die setState-Methode direkt verwenden, um die Benutzeroberfläche teilweise zu aktualisieren.

Verwendungsszenarien: einfache Zustandsänderungen, z. B. Anzahl der Tastenklicks, Wechselzustand usw.

Vorsichtsmaßnahmen:

  1. Häufige Aufrufe von setState können zu Leistungsproblemen führen
  2. Vermeiden Sie den Aufruf von setState in der Build-Methode

2. Verwenden Sie StatefulWidget und InheritedWidget, um die Benutzeroberfläche teilweise zu aktualisieren

        StatefulWidget ist eine Komponente mit Zustand,InheritedWidget Wird zum Teilen von Daten innerhalb des Komponentenbaums verwendet.

Wenn wir Daten teilen müssen, können wir StatefulWidget und InheritedWidget in Betracht ziehen, um die Benutzeroberfläche teilweise zu aktualisieren.

Der vollständige Code lautet wie folgt:

Abbildung 2. Aktualisieren Sie die Benutzeroberfläche, indem Sie Daten teilen

  1. import 'package:flutter/material.dart';
  2.  
  3. class MyInheritedWidget extends InheritedWidget {
  4.   final int counter;
  5.   const MyInheritedWidget({
  6.     super.key,
  7.     required this.counter,
  8.     required super.child,
  9.   });
  10.   @override
  11.   bool updateShouldNotify(covariant InheritedWidget oldWidget) {
  12.     return true;
  13.   }
  14.   static MyInheritedWidget? of(BuildContext context) {
  15.     return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  16.   }
  17. }
  18.  
  19. class InheritedWidgetPage extends StatefulWidget {
  20.   final String title;
  21.   const InheritedWidgetPage({super.key, required this.title});
  22.  
  23.   @override
  24.   State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
  25. }
  26.  
  27. class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  28.   int counter = 0;
  29.   void _incrementCounter() {
  30.     setState(() {
  31.       counter++;
  32.     });
  33.   }
  34.  
  35.   @override
  36.   Widget build(BuildContext context) {
  37.     return MyInheritedWidget(
  38.       counter: counter,
  39.       child: Scaffold(
  40.         appBar: AppBar(
  41.           title: Text(widget.title),
  42.         ),
  43.         body: Center(child: Column(
  44.           children: [
  45.             const Divider(),
  46.             const CounterDisplay(),
  47.             const SizedBox(height: 20),
  48.             ElevatedButton(
  49.               onPressed: _incrementCounter,
  50.               child: const Text('add'),
  51.             ),
  52.           ],
  53.         ),),
  54.       ),
  55.     );
  56.   }
  57. }
  58.  
  59. class CounterDisplay extends StatelessWidget {
  60.   const CounterDisplay({super.key});
  61.   @override
  62.   Widget build(BuildContext context) {
  63.     final inheritedWidget = MyInheritedWidget.of(context);
  64.     return Text('点击次数: ${inheritedWidget?.counter}');
  65.   }
  66. }

Die Hauptverwendungsszenarien dieser Methode sind wie folgt: beim Teilen des Status im Komponentenbaum, z. B. Thema, Spracheinstellungen usw.

Der Vorteil besteht darin, dass der Datenaustausch und die Codeeinführung bequem sind

Der Nachteil besteht darin, dass die Verwendung kompliziert ist und die Leistung beeinträchtigt sein kann.

3.ValueNotifier und ValueListenableBuilder

        ValueNotifier Es handelt sich um ein einfaches Statusverwaltungstool.ValueListenableBuilder Zur ÜberwachungValueNotifier Der Wechsel.

Auch die Verwendung ist sehr einfach:

1. ValueNotifier instanziieren

2. Das zu überwachende Widget-Objekt wird mit ValueListenableBuilder umschlossen

3. So ändern Sie ereignisgesteuerte Daten

Im Vergleich zu den vorherigen Methoden ist diese Methode sehr einfach und benutzerfreundlich und weist auch eine sehr hohe Leistung auf.

Nachteile: Kann nur einfache Zustandsänderungen verarbeiten

Der vollständige Code lautet wie folgt:

  1. import 'package:flutter/material.dart';
  2.  
  3. class ValueNotifierPage extends StatefulWidget {
  4.   final String title;
  5.   const ValueNotifierPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<ValueNotifierPage> createState() => _ValueNotifierPageState();
  9. }
  10.  
  11. class _ValueNotifierPageState extends State<ValueNotifierPage> {
  12.  
  13.   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
  14.  
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return Scaffold(
  18.         appBar: AppBar(
  19.           title: Text(widget.title),
  20.         ),
  21.         body: Center(
  22.           child: ValueListenableBuilder<int>(
  23.             valueListenable: _counter,
  24.             builder: (context, value, child) {
  25.               return Text(
  26.                 '您点击了$value次',
  27.                 style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  28.               );
  29.             },
  30.           )
  31.         ),
  32.         floatingActionButton: FloatingActionButton(
  33.           child: const Icon(Icons.add),
  34.           onPressed: () {
  35.             _counter.value ++;
  36.           },
  37.         )
  38.     );
  39.   }
  40. }

4.StreamBuilder

Stream ist ein Objekt, das zur Bereitstellung asynchroner Ereignisse verwendet wird. Ereignisse können über StreamController gesendet werden. Wenn Sie die Benutzeroberfläche aktualisieren müssen, können Sie ein Ereignis an den Stream senden und dann StreamBuilder verwenden, um den Stream abzuhören. Wenn ein neues Ereignis empfangen wird, erstellt StreamBuilder die Benutzeroberfläche automatisch neu. Diese Methode eignet sich für Situationen, in denen mehrere asynchrone Ereignisse überwacht werden müssen.

Wenn wir asynchrone Datenströme wie Netzwerkanforderungen, Echtzeitdaten usw. verarbeiten müssen, können wir die Verwendung von StreamBuilder in Betracht ziehen. Im folgenden Beispiel haben wir beispielsweise eine asynchrone Methode geschrieben, die eine Netzwerkanfrage simuliert. Wenn die Netzwerkanfrage nicht das richtige Ergebnis zurückgibt, können wir den Fortschrittsbalken laden.

Der Vorteil dieser Methode besteht darin, dass asynchrone Anforderungen genauer gesteuert werden können, z. B. der Status von Netzwerkanforderungen usw. Allerdings ist Dior komplexer und erfordert möglicherweise mehr Code.

Der vollständige Code lautet wie folgt:

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3.  
  4. class StreamBuilderRefreshUIPage extends StatefulWidget {
  5.   final String title;
  6.   const StreamBuilderRefreshUIPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<StreamBuilderRefreshUIPage> createState() =>
  10.       _StreamBuilderRefreshUIPageState();
  11. }
  12.  
  13. class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  14.   late Future<String> _data;
  15.  
  16.   Future<String> fetchData() async {
  17.     // 模拟网络请求延迟
  18.     await Future.delayed(const Duration(seconds: 2));
  19.     // 返回模拟数据
  20.     return 'Hello, Flutter!';
  21.   }
  22.  
  23.   @override
  24.   void initState() {
  25.     // TODO: implement initState
  26.     super.initState();
  27.     _data = fetchData();
  28.   }
  29.  
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       appBar: AppBar(
  34.         title: Text(widget.title),
  35.       ),
  36.       body: Center(
  37.         child: FutureBuilder<String>(
  38.           future: _data,
  39.           builder: (context, snapshot) {
  40.             if (snapshot.connectionState == ConnectionState.waiting) {
  41.               return const CircularProgressIndicator();
  42.             } else if (snapshot.hasError) {
  43.               return Text('Error: ${snapshot.error}');
  44.             } else {
  45.               return Text('Data: ${snapshot.data}');
  46.             }
  47.           },
  48.         ),
  49.       ),
  50.       floatingActionButton: FloatingActionButton(
  51.         onPressed: fetchData,
  52.         tooltip: 'Increment',
  53.         child: const Icon(Icons.add),
  54.       ),
  55.     );
  56.   }
  57. }

5.Anbieter

       Provider Es handelt sich um eine von Flutter empfohlene Zustandsverwaltungslösung.Consumer Wird zum Lesen und Überwachen des Status verwendet.

Nehmen wir auch den Timer als Beispiel.

1. Zuerst importieren wir Provider.

Anbieter: ^6.1.2

2. Passen Sie die ChangeNotifier-Klasse an.

ChangeNotifier ist eine einfache Klasse im Flutter SDK. Es wird verwendet, um Benachrichtigungen an Zuhörer zu senden. Mit anderen Worten: Wenn es als ChangeNotifier definiert ist, können Sie dessen Statusänderungen abonnieren. (Dies ähnelt dem bekannten Beobachtermuster).

In dem Code, den wir implementieren möchten, gibt es zwei Variablen _counter1 und _counter2. Der Code ist wie folgt definiert:

  1. class CounterModel extends ChangeNotifier {
  2.   int _counter1 = 0;
  3.   int _counter2 = 0;
  4.   void addCounter1(){
  5.     debugPrint('counter:$_counter1');
  6.     _counter1 += 1;
  7.     notifyListeners();
  8.   }
  9.   void addCounter2(){
  10.     debugPrint('counter:$_counter2');
  11.     _counter2 += 1;
  12.     notifyListeners();
  13.   }
  14. }

3. Verwenden Sie „Customer“, um das Widget zu umschließen, das wir aktualisieren möchten

  1.             Consumer<CounterModel>(
  2.               builder: (context, counterModel, child) {
  3.                 return Row(
  4.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  5.                   children: [
  6.                     Text('计数器1个数: ${counterModel._counter1}'),
  7.                     ElevatedButton(onPressed: (){
  8.                       counterModel.addCounter1();
  9.                     }, child: const Icon(Icons.add),),
  10.                   ],
  11.                 );
  12.               },
  13.             ),

4. Der vollständige Code lautet wie folgt:

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3.  
  4. class ProviderRefreshPage extends StatefulWidget {
  5.   final String title;
  6.   const ProviderRefreshPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
  10. }
  11.  
  12. class CounterModel extends ChangeNotifier {
  13.   int _counter1 = 0;
  14.   int _counter2 = 0;
  15.   void addCounter1(){
  16.     debugPrint('counter:$_counter1');
  17.     _counter1 += 1;
  18.     notifyListeners();
  19.   }
  20.   void addCounter2(){
  21.     debugPrint('counter:$_counter2');
  22.     _counter2 += 1;
  23.     notifyListeners();
  24.   }
  25. }
  26.  
  27. class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
  28.  
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return Scaffold(
  32.       appBar: AppBar(
  33.         title: Text(widget.title),
  34.       ),
  35.       body: Center(
  36.         child: Column(
  37.           mainAxisAlignment: MainAxisAlignment.start,
  38.           children: <Widget>[
  39.             const SizedBox(height: 10,), // 添加一些间距
  40.             const Divider(),
  41.             const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
  42.             Consumer<CounterModel>(
  43.               builder: (context, counterModel, child) {
  44.                 return Row(
  45.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  46.                   children: [
  47.                     Text('计数器1个数: ${counterModel._counter1}'),
  48.                     ElevatedButton(onPressed: (){
  49.                       counterModel.addCounter1();
  50.                     }, child: const Icon(Icons.add),),
  51.                   ],
  52.                 );
  53.               },
  54.             ),
  55.  
  56.             Consumer<CounterModel>(
  57.               builder: (context, counterModel, child) {
  58.                 return Row(
  59.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  60.                   children: [
  61.                     Text('计数器1个数: ${counterModel._counter2}'),
  62.                     ElevatedButton(onPressed: (){
  63.                       counterModel.addCounter2();
  64.                     }, child: const Icon(Icons.add),),
  65.                   ],
  66.                 );
  67.               },
  68.             ),
  69.             const Divider(height: 20,),
  70.           ],
  71.         ),
  72.       ),
  73.     );
  74.   }
  75. }

6.GetX

Wir können GetX auch verwenden, um eine teilweise Aktualisierung der Benutzeroberfläche zu implementieren.

Installieren Sie zuerst GetX:

get: ^4.6.6

Dann kapseln wir die Variablen in GetxController.

  1. class CounterManagerController extends GetxController {
  2.   final counter1 = 0.obs;
  3.   final counter2 = 0.obs;
  4.   void incrementCount1() {
  5.     counter1.value++;
  6.   }
  7.   void incrementCount2() {
  8.     counter2.value++;
  9.   }
  10. }

Verwenden Sie dann Obx, um das Widget zu umschließen, das Logik anzeigen muss.

Obx(()=&gt; Text('Zähler 1 Nummer: ${controller.counter2.value}'))

Der vollständige Code lautet wie folgt:

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  3.  
  4.  
  5. class CounterManagerController extends GetxController {
  6.   final counter1 = 0.obs;
  7.   final counter2 = 0.obs;
  8.   void incrementCount1() {
  9.     counter1.value++;
  10.   }
  11.   void incrementCount2() {
  12.     counter2.value++;
  13.   }
  14. }
  15.  
  16. class GetXRefreshUIPage extends StatelessWidget {
  17.   final String title;
  18.   const GetXRefreshUIPage({super.key, required this.title});
  19.  
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     final CounterManagerController controller = Get.put(CounterManagerController());
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text(title),
  26.       ),
  27.       body: Center(
  28.         child: Column(
  29.           mainAxisAlignment: MainAxisAlignment.start,
  30.           children: <Widget>[
  31.             const SizedBox(
  32.               height: 10,
  33.             ), // 添加一些间距
  34.             const Divider(),
  35.             const Text(
  36.               '计数器实例',
  37.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  38.             ),
  39.             Row(
  40.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  41.               children: [
  42.                 Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
  43.                 ElevatedButton(
  44.                   onPressed: () {
  45.                     controller.incrementCount1();
  46.                   },
  47.                   child: const Icon(Icons.add),
  48.                 ),
  49.               ],
  50.             ),
  51.             Row(
  52.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  53.               children: [
  54.                 Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
  55.                 ElevatedButton(
  56.                   onPressed: () {
  57.                     controller.incrementCount2();
  58.                   },
  59.                   child: const Icon(Icons.add),
  60.                 ),
  61.               ],
  62.             ),
  63.             const Divider(
  64.               height: 20,
  65.             ),
  66.           ],
  67.         ),
  68.       ),
  69.     );
  70.   }
  71. }

Natürlich gibt es mehrere andere Möglichkeiten, eine teilweise Aktualisierung in GetX zu implementieren. Sie können einen Blick auf die Dokumentation werfen. Hier ist nur eine Umsetzungsidee.

7. Verwenden Sie GlobalKey

Die oben genannten drei Implementierungsmethoden werden alle über das Framework implementiert. Wenn Sie dieses Framework nicht importieren möchten, können wir GlobalKey verwenden, um die teilweise Aktualisierungsfunktion der Benutzeroberfläche zu implementieren.

Ein in der gesamten Anwendung eindeutiger GlobalKey identifiziert Elemente eindeutig. GlobalKey ermöglicht den Zugriff auf die zugehörigen Elemente, zBuildContext .fürStatefulWidgets, GlobalKey bietet auchStateZugang.

Wenn wir in unserer Timer-Demo die Benutzeroberfläche teilweise über GlobalKey aktualisieren, nehmen wir zuerst das Widget heraus, das teilweise aktualisiert werden soll, und kapseln es in eine separate Komponente.

Der vollständige Code lautet wie folgt. Wir kapseln das teilweise zu aktualisierende Widget und stellen eine Schnittstelle zum Aktualisieren interner Daten bereit: onPressed.

  1. class CounterText extends StatefulWidget {
  2.   const CounterText(Key key) : super(key: key);
  3.   @override
  4.   State<StatefulWidget> createState() {
  5.     return CounterTextState();
  6.   }
  7. }
  8.  
  9. class CounterTextState extends State<CounterText> {
  10.   String _text="0";
  11.  
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Center(
  15.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  16.     );
  17.   }
  18.   void onPressed(int count) {
  19.     setState(() {
  20.       _text = count.toString();
  21.     });
  22.   }
  23. }

Dann instanziieren Sie GlobaKey in unserer Hauptschnittstelle:

  1.   int _count   = 0;
  2.   int _count2  = 0;
  3.   GlobalKey<CounterTextState> textKey = GlobalKey();
  4.   GlobalKey<CounterTextState> textKey2 = GlobalKey();

Falls die Benutzeroberfläche aktualisiert werden muss, rufen Sie die im vorherigen Schritt bereitgestellte Schnittstelle über GlobalKey auf und aktualisieren Sie sie.

Der vollständige Code lautet wie folgt:

  1. import 'package:flutter/material.dart';
  2.  
  3. class GlobalKeyRefreshPage extends StatefulWidget {
  4.   final String title;
  5.   const GlobalKeyRefreshPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
  9. }
  10.  
  11. class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  12.   int _count   = 0;
  13.   int _count2  = 0;
  14. //包裹你定义的需要更新的weight
  15.   GlobalKey<CounterTextState> textKey = GlobalKey();
  16.   GlobalKey<CounterTextState> textKey2 = GlobalKey();
  17.  
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return Scaffold(
  21.       appBar: AppBar(
  22.         title:  Text(widget.title),
  23.       ),
  24.       body: Center(
  25.         child: Column(
  26.           mainAxisAlignment: MainAxisAlignment.start,
  27.           children: <Widget>[
  28.             const SizedBox(
  29.               height: 10,
  30.             ), // 添加一些间距
  31.             const Divider(),
  32.             const Text(
  33.               '计数器实例',
  34.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  35.             ),
  36.             Row(
  37.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  38.               children: [
  39.                 CounterText(textKey),
  40.                 ElevatedButton(
  41.                   onPressed: () {
  42.                     _count++;
  43.                     textKey.currentState?.onPressed(_count);
  44.                   },
  45.                   child: const Icon(Icons.add),
  46.                 ),
  47.               ],
  48.             ),
  49.             Row(
  50.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  51.               children: [
  52.                 CounterText(textKey2),
  53.                 ElevatedButton(
  54.                   onPressed: () {
  55.                     _count2++;
  56.                     textKey2.currentState?.onPressed(_count2);
  57.                   },
  58.                   child: const Icon(Icons.add),
  59.                 ),
  60.               ],
  61.             ),
  62.             const Divider(
  63.               height: 20,
  64.             ),
  65.           ],
  66.         ),
  67.       ),
  68.     );
  69.   }
  70. }
  71.  
  72.  
  73. class CounterText extends StatefulWidget {
  74.   const CounterText(Key key) : super(key: key);
  75.   @override
  76.   State<StatefulWidget> createState() {
  77.     return CounterTextState();
  78.   }
  79. }
  80.  
  81. class CounterTextState extends State<CounterText> {
  82.   String _text="0";
  83.  
  84.   @override
  85.   Widget build(BuildContext context) {
  86.     return Center(
  87.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  88.     );
  89.   }
  90.   void onPressed(int count) {
  91.     setState(() {
  92.       _text = count.toString();
  93.     });
  94.   }
  95. }

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post