Flutter中使用GetX状态管理模拟网络请求

爱编程的锤子

已于 2024-08-23 14:39:45 修改

阅读量593

点赞数 9

CC 4.0 BY-SA版权

文章标签： flutter 前端前端框架 kotlin intellij-idea

于 2024-08-22 17:49:51 首次发布

本文链接：https://blog.youkuaiyun.com/Delphi_7710/article/details/141434042

几种方式:

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

对于ValueBuilder来讲,相关的值管理都是在ValueBuilder中进行管理,所以如果你想使用floatingActionButton来进行管理的话,建议还是改为StatefulWidget来进行操作,没办法,Ai都设计不出好的方案解决这个需求,所以我们可以换种方式,直接在ValueBuilder里面加按钮来进行操作,所以在这个例子是不建议使用这种方式来做的

homepage

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

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

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

  const HomePage({super.key});

  Future<TabData?> getNewestDataFromUrl() async {
    final http.Response response =
        await http.get(Uri.parse('http://192.168.0.125:8001/getnewestdata'));
    if (response.statusCode == 200) {
      final jsonData = response.body;
      return newBarDataFromJson(jsonData);
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Test Api Request"),
          centerTitle: true,
        ),
        body: ValueBuilder<TabData?>(
          initialValue: null,
          builder: (value, updateFn) {
            return ListView(
              children: [
                Text("Code: ${value?.code ?? 'Loading...'}"),
                Text("Result: ${value?.result ?? 'Loading...'}"),
                Text(
                    "Game Date: ${value?.gameDate?.toString() ?? 'Loading...'}"),
                Text(
                    "Bonus Info: ${value?.bonusInfo?.totalIn ?? 'Loading...'}"),
                ElevatedButton(
                  onPressed: () async {
                    final newData = await getNewestDataFromUrl();
                    updateFn(newData);
                  },
                  child: const Text('update'),
                )
              ],
            );
          },
          onUpdate: (value) {},
        ));
  }
}

不需要Controller了

五,Worker

homepage与obx保持一致...

homepage_controller:

import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:test_api_request/model/tab_data.dart';

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://192.168.0.125:8001/getnewestdata'));
    if (response.statusCode == 200) {
      final jsonData = response.body;
      newestDataInfo.value = newBarDataFromJson(jsonData);
    }
  }*/

  //Worker
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    //ever每点击一下
    ever(newestDataInfo, (_) => print('Data updated: ${newestDataInfo.value}'));
    debounce(newestDataInfo, (_) => print('Data debounced'),
        time: const Duration(seconds: 1));
    interval(newestDataInfo, (_) => print('Data changed within interval'),
        time: const Duration(seconds: 1));
  }

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