Flutter中使用GetX状态管理(更新中...)

几种方式:

   1.  Obx

   2.  GetX

   3.  GetBuilder

   4.  ValueBuilder(没搞懂,后面再补充)

   5.  worker

以模拟网络请求的例子来作测试,以下是几种方式的实现过程:

初始准备:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:test_api_request/pages/homepage.dart';


Future<void> main() async {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "Test Api Request",
      home: HomePage(),
    );
  }
}

还有一个Flutter对象类

一,使用Obx:

首先,为了调理清晰和方便重复调用,我先建立了两个文件,一个是homepage,另一个是homepage_controller

import 'dart:async';


import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;


import '../model/tab_data.dart';
import 'homepage_controller.dart';


class HomePage extends StatelessWidget {
  // 注册控制器实例,简单来说就是赋值,valueBuilder不需要
  final homePageController = Get.put(HomePageController());

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Api Request"),
        centerTitle: true,
      ),
      body:  Obx(
        () => ListView(
          children: [
            Text(
                "Code: ${homePageController.newestDataInfo.value?.code ?? 'Loading...'}"),
            Text(
                "Result: ${homePageController.newestDataInfo.value?.result ?? 'Loading...'}"),
            Text(
                "Game Date: ${homePageController.newestDataInfo.value?.gameDate?.toString() ?? 'Loading...'}"),
            Text(
                "Bonus Info: ${homePageController.newestDataInfo.value?.bonusInfo?.totalIn ?? 'Loading...'}"),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: homePageController.getNewestDataFromUrl,
        child: const Icon(Icons.add),
      ),
    );
  }
}

homepage_controller

class HomePageController extends GetxController {
  Rx<TabData?> newestDataInfo = Rx<TabData?>(null);


  //Obx,GetX
  Future<void> getNewestDataFromUrl() async {
    final http.Response response =
        await http.get(Uri.parse('http://xxx.xxx.xx.xxx:xxxx/getnewestdata'));
    if (response.statusCode == 200) {
      final jsonData = response.body;
      newestDataInfo.value = newBarDataFromJson(jsonData);
    }
  }
}

二,使用GetX:

homepage_controller不变

homepage:

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

import 'homepage_controller.dart';

class HomePage extends StatelessWidget {
  // 注册控制器实例,简单来说就是赋值,valueBuilder不需要
  final homePageController = Get.put(HomePageController());

  HomePage({super.key});

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Api Request"),
        centerTitle: true,
      ),
      //GetX使用示例
      body: GetX<HomePageController>(
        init: homePageController,
        // 初始化状态,需要加载的数据,这里可以实现局部刷新,就不需要使用initState了
        initState: (_) {
          homePageController.getNewestDataFromUrl();
        },
        dispose: (_) {
          homePageController.dispose();
        },
        builder: (homePageController) {
          return ListView(
            children: [
              Text(
                  "Code: ${homePageController.newestDataInfo.value?.code ?? 'Loading...'}"),
              Text(
                  "Result: ${homePageController.newestDataInfo.value?.result ?? 'Loading...'}"),
              Text(
                  "Game Date: ${homePageController.newestDataInfo.value?.gameDate?.toString() ?? 'Loading...'}"),
              Text(
                  "Bonus Info: ${homePageController.newestDataInfo.value?.bonusInfo?.totalIn ?? 'Loading...'}"),
            ],
          );
        },
      ),
      //加载数据按钮,如果你在GetX中已经设置了初始化便不再需要
      floatingActionButton: FloatingActionButton(
        onPressed: () => homePageController.getNewestDataFromUrl(),
        // Get.find<HomePageController>主要用于查找控制器实例,但是我们这里已经建立了一个
        // homePageController,所以不需要了
        // Get.find<HomePageController>().getNewestDataFromUrl(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

三,使用GetBuilder

homepage

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

import 'homepage_controller.dart';

class HomePage extends StatelessWidget {
  // 注册控制器实例,简单来说就是赋值,valueBuilder不需要
  final homePageController = Get.put(HomePageController());

  HomePage({super.key});

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Api Request"),
        centerTitle: true,
      ),
      //GetBuilder实例
      body: GetBuilder<HomePageController>(
        init: homePageController,
        // 销毁控制器,
        dispose: (_) {
          homePageController.dispose();
        },
        // 类似StatefulWright的initState
        initState: (_) {
          homePageController.getNewestDataFromUrl();
        },
        builder: (homePageController) {
          return ListView(
            children: [
              Text(
                  "Code: ${homePageController.newestDataInfo.value?.code ?? 'Loading...'}"),
              Text(
                  "Result: ${homePageController.newestDataInfo.value?.result ?? 'Loading...'}"),
              Text(
                  "Game Date: ${homePageController.newestDataInfo.value?.gameDate?.toString() ?? 'Loading...'}"),
              Text(
                  "Bonus Info: ${homePageController.newestDataInfo.value?.bonusInfo?.totalIn ?? 'Loading...'}"),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => homePageController.getNewestDataFromUrl(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

homepage_controller同上,但是要在方法结尾+update():

Future<void> getNewestDataFromUrl() async {
    final http.Response response =
        await http.get(Uri.parse('http://你的url/getnewestdata'));
    if (response.statusCode == 200) {
      final jsonData = response.body;
      newestDataInfo.value = newBarDataFromJson(jsonData);
      // 如果
      update();
    }
  }

四,ValueBuilder

五,Worker

homepage与obx保持一致...

homepage_controller:

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

import 'homepage_controller.dart';

class HomePage extends StatelessWidget {
  // 注册控制器实例,简单来说就是赋值,valueBuilder不需要
  final homePageController = Get.put(HomePageController());

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Api Request"),
        centerTitle: true,
      ),
      body: Obx(
        () => ListView(
          children: [
            Text(
                "Code: ${homePageController.newestDataInfo.value?.code ?? 'Loading...'}"),
            Text(
                "Result: ${homePageController.newestDataInfo.value?.result ?? 'Loading...'}"),
            Text(
                "Game Date: ${homePageController.newestDataInfo.value?.gameDate?.toString() ?? 'Loading...'}"),
            Text(
                "Bonus Info: ${homePageController.newestDataInfo.value?.bonusInfo?.totalIn ?? 'Loading...'}"),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: homePageController.getNewestDataFromUrl,
        child: const Icon(Icons.add),
      ),
    );
  }
}