Обмен технологиями

Несколько способов Flutter реализовать частичное обновление

2024-07-12

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

Оглавление

Предисловие

1. Важность локального обновления

1. Концепция

2. Важность

2. Несколько способов реализовать частичное обновление

1. Используйте метод setState для частичного обновления.

2. Используйте StatefulWidget и InheritedWidget, чтобы частично обновить пользовательский интерфейс.

3.ValueNotifier и ValueListenableBuilder

4.StreamBuilder

5.Поставщик

6.GetX

7. Используйте глобальный ключ

Предисловие

Во Flutter управление состоянием означает управление и обновление состояния данных в приложении, а также обновление пользовательского интерфейса в соответствии с изменениями состояния. Эффективное управление состоянием может помочь разработчикам создавать более эффективные и удобные в обслуживании приложения.

setState — это самый простой метод управления состоянием во Flutter. При изменении состояния платформа будет уведомлена о необходимости перестроить пользовательский интерфейс. Конечно, мы знаем, что когда мы вызываем метод setState, страница будет перерисована. Когда макет страницы более сложный, иногда нам нужно обновить только отдельный пользовательский интерфейс. В настоящее время, если мы используем метод setState, он будет иметь. более высокая производительность. Используйте для перерисовки пользовательского интерфейса текущей страницы.

Итак, какие методы существуют во Flutter для частичного обновления пользовательского интерфейса. В этом блоге перечислено несколько способов реализации частичного обновления во Flutter.

1. Важность локального обновления

1. Концепция

Частичное обновление означает обновление только части интерфейса, а не всей страницы. Это улучшает производительность и удобство использования.

2. Важность

  1. Избегайте ненужных перерисовок и повышайте производительность
  2. Обеспечьте более плавный пользовательский опыт
  3. Уменьшить потребление ресурсов

2. Несколько способов реализовать частичное обновление

1. Используйте метод setState для частичного обновления.

setState — наиболее часто используемый метод управления состоянием во Flutter. Он используется для уведомления платформы об изменениях состояния, что приводит к реконструкции интерфейса.

Когда мы создаем проект Flutter, примером таймера, генерируемого системой по умолчанию, является пример частичного обновления 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. }

Рисунок 1. Частичное обновление setState

Если страница относительно простая, вы можете напрямую использовать метод setState, чтобы частично обновить пользовательский интерфейс.

Сценарии использования: простые изменения состояния, такие как количество нажатий кнопок, состояние переключения и т. д.

Меры предосторожности:

  1. Частые вызовы setState могут вызвать проблемы с производительностью.
  2. Избегайте вызова setState в методе сборки.

2. Используйте StatefulWidget и InheritedWidget, чтобы частично обновить пользовательский интерфейс.

        StatefulWidget является компонентом с состоянием,InheritedWidget Используется для обмена данными в дереве компонентов.

Когда нам нужно поделиться данными, мы можем использовать StatefulWidget и InheritedWidget для частичного обновления пользовательского интерфейса.

Полный код выглядит следующим образом:

Рисунок 2. Обновление пользовательского интерфейса путем обмена данными

  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. }

Основные сценарии использования этого метода следующие: при совместном использовании состояний в дереве компонентов, таких как тема, настройки языка и т. д.

Преимущество в том, что обмен данными удобен, а введение кода

Недостатком является то, что его сложно использовать и это может повлиять на производительность.

3.ValueNotifier и ValueListenableBuilder

        ValueNotifier Это простой инструмент управления статусом,ValueListenableBuilder для мониторингаValueNotifier Изменение.

Использование также очень простое:

1. Создать экземпляр ValueNotifier

2. Объект Widget, который нужно отслеживать, обернут ValueListenableBuilder.

3. Как изменить данные, инициированные событием

По сравнению с предыдущими методами этот метод очень прост и удобен в использовании, а его производительность также очень высока.

Недостатки: Может обрабатывать только простые изменения состояния.

Полный код выглядит следующим образом:

  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 — это объект, используемый для доставки асинхронных событий, и события можно отправлять через StreamController. Если вам необходимо обновить пользовательский интерфейс, вы можете отправить событие в поток, а затем использовать StreamBuilder для прослушивания потока. При получении нового события StreamBuilder автоматически перестроит пользовательский интерфейс. Этот метод подходит для ситуаций, когда необходимо отслеживать несколько асинхронных событий.

Когда нам нужно обрабатывать асинхронные потоки данных, такие как сетевые запросы, данные в реальном времени и т. д., мы можем рассмотреть возможность использования StreamBuilder. Например, в следующем примере мы написали асинхронный метод, имитирующий сетевой запрос. Если сетевой запрос не возвращает правильный результат, мы можем загрузить индикатор выполнения.

Преимущество этого метода в том, что он позволяет более точно контролировать асинхронные запросы, например состояние сетевых запросов и т. д. Однако Dior более сложен и может потребовать больше кода.

Полный код выглядит следующим образом:

  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.Поставщик

       Provider Это решение для управления состоянием, рекомендованное Flutter.Consumer Используется для чтения и мониторинга состояния.

Давайте также возьмем таймер в качестве примера.

1. Сначала импортируем Provider.

провайдер: ^6.1.2

2. Настройте класс ChangeNotifier.

ChangeNotifier — это простой класс в Flutter SDK. Он используется для отправки уведомлений слушателям. Другими словами, если он определен как ChangeNotifier, вы можете подписаться на изменения его состояния. (Это похоже на знакомый шаблон наблюдателя).

В коде, который мы хотим реализовать, есть две переменные _counter1 и _counter2. Код определяется следующим образом:

  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. Используйте Customer, чтобы обернуть виджет, который мы хотим обновить.

  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. Полный код выглядит следующим образом:

  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

Мы также можем использовать GetX для реализации частичного обновления пользовательского интерфейса.

Сначала установите GetX:

get: ^4.6.6

Затем мы инкапсулируем переменные в 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. }

Затем используйте Obx, чтобы обернуть виджет, который должен отображать логику.

Obx(()=&gt; Text('Номер счетчика 1: ${controller.counter2.value}'))

Полный код выглядит следующим образом:

  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. }

Конечно, есть несколько других способов реализовать частичное обновление в GetX. Вы можете посмотреть его документацию. Вот лишь одна идея реализации.

7. Используйте глобальный ключ

Все три вышеуказанных метода реализации реализованы через платформу. Если вы не хотите импортировать эту платформу, мы можем использовать GlobalKey для реализации функции частичного обновления пользовательского интерфейса.

Ключ, который уникален во всем приложении. GlobalKey уникально идентифицирует элементы. GlobalKey обеспечивает доступ к связанным элементам, например:BuildContext .дляStatefulWidgets, GlobalKey также предоставляетStateДоступ.

В нашей демонстрации таймера, если мы частично обновляем пользовательский интерфейс через GlobalKey, сначала мы извлекаем виджет, который нужно частично обновить, и инкапсулируем его в отдельный компонент.

Полный код выглядит следующим образом. Мы инкапсулируем виджет для частичного обновления и предоставляем интерфейс для обновления внутренних данных 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. }

Затем создайте экземпляр GlobaKey в нашем основном интерфейсе:

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

В случае необходимости обновления пользовательского интерфейса вызовите интерфейс, предоставленный на предыдущем шаге, через GlobalKey и обновите его.

Полный код выглядит следующим образом:

  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. }

Личный профиль

Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования. Все ознакомьтесь.

моя контактная информация

Почта