序文

最近、正式に Flutter プロジェクトを書き始めることになり、Flutter がどのようにフレームワーク設計を行っているかを閲覧していると、突然 Flutter の状態を管理する方法についての記事を目にしました。Flutterにおける状態管理はよく理解されていませんが、ページ間で値を受け渡したり、コンポーネント内の値を変更したりする必要がある場合には状態を変更する必要があります。この記事で、作者が Getx コンポーネントを使用していることを知り、非常に使いやすく、状態の管理に加えて、ルーティング、テーマ、および複数の言語の管理もできるため、Getx の学習を始めました。

Getx github https://github.com/jonataslaw/getx

使用

新しいフラッターの空のプロジェクトを作成します (デフォルトはカウンターデモです)。まず Getx を pubspec.yaml ファイルに追加します

依存関係:
取得:

次に、このデフォルトのカウンターデモに基づいて、Getx の強力な機能を使用してみましょう

最初の一歩

void main() => runApp(GetMaterialApp(home: Home()));

注: これは Flutter の MaterialApp を変更するものではありません。GetMaterialApp は変更された MaterialApp ではなく、単に事前設定されたウィジェットであり、そのサブコンポーネントはデフォルトの MaterialApp です。手動で構成することもできますが、絶対に必要というわけではありません。GetMaterialApp は、ルートの作成、挿入、翻訳の挿入など、ルートナビゲーションに必要なものすべてを挿入します。Get を状態管理または依存関係管理にのみ使用する場合は、GetMaterialApp を使用する必要はありません。GetMaterialApp は、ルーティング、スナックバー、国際化、ボトムシート、ダイアログ、およびルーティングに関連するコンテキストのない高レベル API に必要です。
注 2:この手順は、ルート管理( など)を使用する場合にのみ必要です。使用しない場合は、ステップ 1 を行う必要はありません。Get.to()Get.back()

第二段階

ビジネスロジッククラスを作成し、すべての変数、メソッド、およびコントローラーをこのビジネスロジッククラスに配置します。ここには理解できない追加コード「0.obs」があります。このコードの使用については心配しないでください。まず下に進みましょう。

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

第三段階

ホームページの Home と 2 ページ目の Other を作成します。Get フレームワークを使用した後は、基本的にステートフルコンポーネント、つまり StatefulWidget を作成する必要はありません。

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // 使用Get.put()实例化你的类，使其对当下的所有子路由可用。
    final Controller c = Get.put(Controller());

    return Scaffold(
      // 使用Obx(()=>每当改变计数时，就更新Text()。
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // 用一个简单的Get.to()即可代替Navigator.push那8行，无需上下文！
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // 你可以让Get找到一个正在被其他页面使用的Controller，并将它返回给你。
  final Controller c = Get.find();

  @override
  Widget build(context){
     // 访问更新后的计数变量
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

この時点で、アプリを直接実行して開くことができ、StatelessWidget コンポーネントに状態変更を実装したことがわかります。?

使用原理

コントローラークラスで変数 count = 0.obs を宣言しましたが、dart の構文上の複雑さのため、この変数がどのような型であるかはわかりません。この GetxController のライフサイクルで count 変数の型を出力できます。

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
  @override
  void onInit() {
    super.onInit();
    print(count.runtimeType);
  }
}

出力された型が RxInt であることがわかります。Int 型はよく知られていますが、その前に Rx が追加されるのは何でしょうか?

これは実際には、応答変数Rx_Type と呼ばれるGetx フレームワークで定義された型で、その後に Type はリスト、マップなどを含む任意の基本型にすることができ、カスタムの応答変数を宣言することもできます。

レスポンシブ変数を宣言するための公式な方法は 3 つありますが、最初の 2 つは一般的には使用されず、3 番目の方法が最も実用的です。

3 番目の方法:

final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;

// 自定义类 - 可以是任何类
final user = User().obs;

変数の末尾に .obs を追加するだけで、変数が監視可能になります。

これを使用する場合、コンポーネントを Obx() でラップする必要があります。観測された値が変化する限り、コンポーネントは再構築されます。

Flutter コンポーネント - Getx の入門 01

序文

使用

最初の一歩

第二段階

第三段階

使用原理

Je suppose que tu aimes