Flutter が部分的なrefresh_developdocを実装するためのいくつかの方法

Flutter が部分リフレッシュを実装するためのいくつかの方法

2024-07-12

序文

1. ローカルリフレッシュの重要性

1.コンセプト

2. 重要性

2. 部分リフレッシュを実装するいくつかの方法

1. setState メソッドを使用して部分更新を行う

2. StatefulWidget と InheritedWidget を使用して UI を部分的に更新します

3.ValueNotifierとValueListenableBuilder

序文

Flutter における状態管理とは、アプリケーション内のデータの状態を管理および更新し、状態の変化に応じて UI を更新する方法を指します。効果的な状態管理は、開発者がより効率的で保守しやすいアプリケーションを作成するのに役立ちます。

setState は、Flutter の最も基本的な状態管理メソッドです。状態が変化すると、フレームワークに UI を再構築するように通知されます。もちろん、setState メソッドを呼び出すとページが再描画されることはわかっていますが、ページレイアウトがより複雑な場合、現時点では setState メソッドを使用する場合、別の UI を更新するだけで済みます。現在のページ UI を再描画するために使用すると、パフォーマンスが向上します。

では、Flutter には UI を部分的に更新するどのような方法があるのでしょうか? このブログでは、Flutter が部分的な更新を実装するためのいくつかの方法をリストします。

1. ローカルリフレッシュの重要性

1.コンセプト

部分更新とは、ページ全体ではなく、インターフェイスの一部のみを更新することを指します。これにより、パフォーマンスとユーザーエクスペリエンスが向上します。

2. 重要性

不必要な再描画を回避し、パフォーマンスを向上させます
よりスムーズなユーザーエクスペリエンスを提供する
リソース消費量の削減

2. 部分リフレッシュを実装するいくつかの方法

1. setState メソッドを使用して部分更新を行う

setState は、Flutter で最も一般的に使用される状態管理メソッドであり、状態の変更をフレームワークに通知し、インターフェイスの再構築につながります。

Flutter プロジェクトを作成するときに、システムによってデフォルトで生成されるタイマーの例は、setState 部分リフレッシュの例です。


import 'package:flutter/material.dart';
 
class SetStateMainPage extends StatefulWidget {
  final String title;
  const SetStateMainPage({super.key, required this.title});
 
  @override
  State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
}
 
class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  int _count = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(
          '您点击了$_count次',
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              _count++;
            });
          },
      )
    );
  }
}

図 1.setState の部分更新

ページが比較的単純な場合は、setState メソッドを直接使用して UI を部分的に更新できます。

使用シナリオ: ボタンのクリック数、スイッチの状態などの単純な状態変更。

予防：

setState を頻繁に呼び出すと、パフォーマンスの問題が発生する可能性があります
ビルドメソッドで setState を呼び出さないようにします

2. StatefulWidget と InheritedWidget を使用して UI を部分的に更新します

StatefulWidget 状態を持つコンポーネントです。InheritedWidget コンポーネントツリー内でデータを共有するために使用されます。

データを共有する必要がある場合、UI を部分的に更新するために StatefulWidget と InheritedWidget を検討できます。

完全なコードは次のとおりです。

図 2. データを共有して UI を更新する


import 'package:flutter/material.dart';
 
class MyInheritedWidget extends InheritedWidget {
  final int counter;
  const MyInheritedWidget({
    super.key,
    required this.counter,
    required super.child,
  });
  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}
 
class InheritedWidgetPage extends StatefulWidget {
  final String title;
  const InheritedWidgetPage({super.key, required this.title});
 
  @override
  State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
}
 
class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  int counter = 0;
  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      counter: counter,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: Column(
          children: [
            const Divider(),
            const CounterDisplay(),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('add'),
            ),
          ],
        ),),
      ),
    );
  }
}
 
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});
  @override
  Widget build(BuildContext context) {
    final inheritedWidget = MyInheritedWidget.of(context);
    return Text('点击次数: ${inheritedWidget?.counter}');
  }
}

このメソッドの主な使用シナリオは次のとおりです。テーマ、言語設定など、コンポーネントツリーで状態を共有する場合。

利点は、データの共有が便利であることと、コードの導入が容易であることです。

欠点は、使い方が複雑で、パフォーマンスに影響が出る可能性があることです。

3.ValueNotifierとValueListenableBuilder

ValueNotifier 簡易的なステータス管理ツールですが、ValueListenableBuilder 監視用ValueNotifier 変化。

使用方法も非常に簡単です。

1. ValueNotifier をインスタンス化する

2. 監視対象の Widget オブジェクトを ValueListenableBuilder でラップする

3. イベントトリガーデータの変更方法

以前の方法と比較して、この方法は非常にシンプルで使いやすく、パフォーマンスも非常に高いです。

短所: 単純な状態変更のみを処理できます。

完全なコードは次のとおりです。


import 'package:flutter/material.dart';
 
class ValueNotifierPage extends StatefulWidget {
  final String title;
  const ValueNotifierPage({super.key, required this.title});
 
  @override
  State<ValueNotifierPage> createState() => _ValueNotifierPageState();
}
 
class _ValueNotifierPageState extends State<ValueNotifierPage> {
 
  final ValueNotifier<int> _counter = ValueNotifier<int>(0);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: _counter,
            builder: (context, value, child) {
              return Text(
                '您点击了$value次',
                style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
              );
            },
          )
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            _counter.value ++;
          },
        )
    );
  }
}

4.ストリームビルダー

Stream は非同期イベントを配信するために使用されるオブジェクトであり、イベントは StreamController を通じて送信できます。 UI を更新する必要がある場合は、ストリームにイベントを送信し、StreamBuilder を使用してストリームをリッスンすることができます。新しいイベントを受信すると、StreamBuilder が自動的に UI を再構築します。この方法は、複数の非同期イベントを監視する必要がある状況に適しています。

ネットワークリクエストやリアルタイムデータなどの非同期データストリームを処理する必要がある場合は、StreamBuilder の使用を検討できます。たとえば、次の例では、ネットワークリクエストが正しい結果を返さない場合に、プログレスバーをロードできる、ネットワークリクエストをシミュレートする非同期メソッドを作成しました。

この方法の利点は、ネットワークリクエストのステータスなどの非同期リクエストをより正確に制御できることです。ただし、Dior はより複雑で、より多くのコードが必要になる場合があります。

完全なコードは次のとおりです。


import 'dart:async';
import 'package:flutter/material.dart';
 
class StreamBuilderRefreshUIPage extends StatefulWidget {
  final String title;
  const StreamBuilderRefreshUIPage({super.key, required this.title});
 
  @override
  State<StreamBuilderRefreshUIPage> createState() =>
      _StreamBuilderRefreshUIPageState();
}
 
class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  late Future<String> _data;
 
  Future<String> fetchData() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(seconds: 2));
    // 返回模拟数据
    return 'Hello, Flutter!';
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _data = fetchData();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: _data,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchData,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5.プロバイダー

Provider Flutterが推奨する状態管理ソリューションです。Consumer ステータスの読み取りと監視に使用されます。

タイマーを例に挙げてみましょう。

1. まずプロバイダーをインポートします。

プロバイダー: ^6.1.2

2. ChangeNotifier クラスをカスタマイズします。

ChangeNotifier は、Flutter SDK の単純なクラスです。リスナーに通知を送信するために使用されます。つまり、ChangeNotifier として定義されている場合は、その状態の変更をサブスクライブできます。 (これはよく知られた観察者のパターンに似ています)。

実装したいコードには、_counter1 と _counter2 という 2 つの変数があります。コードは次のように定義されています。


class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}

3. Customer を使用して、更新するウィジェットをラップします。


            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),

4. 完全なコードは次のとおりです。


import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
 
class ProviderRefreshPage extends StatefulWidget {
  final String title;
  const ProviderRefreshPage({super.key, required this.title});
 
  @override
  State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
}
 
class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}
 
class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 10,), // 添加一些间距
            const Divider(),
            const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),
 
            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter2}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter2();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),
            const Divider(height: 20,),
          ],
        ),
      ),
    );
  }
}

6.Xを取得する

GetX を使用して UI の部分更新を実装することもできます。

まず GetX をインストールします。

get: ^4.6.6

次に、変数を GetxController にカプセル化します。


class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}

次に、Obx を使用して、ロジックを表示する必要があるウィジェットをラップします。

Obx(()=> Text('カウンター 1 番号: ${controller.counter2.value}'))

完全なコードは次のとおりです。


import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
 
class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}
 
class GetXRefreshUIPage extends StatelessWidget {
  final String title;
  const GetXRefreshUIPage({super.key, required this.title});
 
  @override
  Widget build(BuildContext context) {
    final CounterManagerController controller = Get.put(CounterManagerController());
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount1();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount2();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}

もちろん、GetX で部分更新を実装する方法は他にもいくつかあります。ドキュメントを参照してください。ここで紹介するのは実装アイデアの 1 つです。

7. GlobalKey を使用する

上記の 3 つの実装方法はすべてフレームワークを通じて実装されます。このフレームワークをインポートしたくない場合は、GlobalKey を使用して UI の部分更新機能を実装できます。

アプリケーション全体で一意のキー GlobalKey は、関連する要素へのアクセスを提供します。BuildContext 。のためにStatefulWidgets、GlobalKey も提供しますStateアクセス。

タイマーのデモでは、GlobalKey を通じて UI を部分的に更新する場合、まず部分的に更新するウィジェットを取り出し、それを別のコンポーネントにカプセル化します。

完全なコードは次のとおりです。部分的に更新されるウィジェットをカプセル化し、内部データを更新するためのインターフェイス onPressed を提供します。


class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}
 
class CounterTextState extends State<CounterText> {
  String _text="0";
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}

次に、メインインターフェイスで GlobaKey をインスタンス化します。


  int _count   = 0;
  int _count2  = 0;
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();

UI を更新する必要がある場合は、GlobalKey を介して前の手順で提供されたインターフェイスを呼び出して更新します。

完全なコードは次のとおりです。


import 'package:flutter/material.dart';
 
class GlobalKeyRefreshPage extends StatefulWidget {
  final String title;
  const GlobalKeyRefreshPage({super.key, required this.title});
 
  @override
  State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
}
 
class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  int _count   = 0;
  int _count2  = 0;
//包裹你定义的需要更新的weight
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey),
                ElevatedButton(
                  onPressed: () {
                    _count++;
                    textKey.currentState?.onPressed(_count);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey2),
                ElevatedButton(
                  onPressed: () {
                    _count2++;
                    textKey2.currentState?.onPressed(_count2);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}
 
 
class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}
 
class CounterTextState extends State<CounterText> {
  String _text="0";
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}

技術共有

Flutter が部分リフレッシュを実装するためのいくつかの方法

序文

1. ローカルリフレッシュの重要性

1.コンセプト

2. 重要性

2. 部分リフレッシュを実装するいくつかの方法

1. setState メソッドを使用して部分更新を行う

2. StatefulWidget と InheritedWidget を使用して UI を部分的に更新します

3.ValueNotifierとValueListenableBuilder

4.ストリームビルダー

5.プロバイダー

6.Xを取得する

7. GlobalKey を使用する

個人プロフィール

私の連絡先情報