Flutter中GetX使用StateMixin进行状态管理

以下是我的一个模拟网络请求例子,当点击change it的时候就会进行数据更新,代码如下:

tab_data(类对象信息):

// To parse this JSON data, do
//
//     final newBarData = newBarDataFromJson(jsonString);

import 'dart:convert';

// TabData newBarDataFromJson(String str) => TabData.fromJson(json.decode(str));
TabData newBarDataFromJson(String str) {
  return TabData.fromJson(json.decode(str));
}

// List<TabData> newBarDataFromJson1(String str) =>
//     List<TabData>.from(json.decode(str).map((x) => TabData.fromJson(x)));
List<TabData> newBarDataFromJson1(String str) {
  return List<TabData>.from(
    json.decode(str).map((x) {
      TabData.fromJson(x);
    }),
  );
}

// String newBarDataToJson(TabData data) => json.encode(data.toJson());
String newBarDataToJson(TabData data) {
  return json.encode(data.toJson());
}

class TabData {
  String? code;
  String? result;
  DateTime? gameDate;
  

  TabData({
    this.code,
    this.result,
    this.gameDate,
    
  });

  TabData copyWith({
    String? code,
    String? result,
    DateTime? gameDate,
    
  }) =>
      TabData(
        code: code ?? this.code,
        result: result ?? this.result,
        gameDate: gameDate ?? this.gameDate,
        
      );

  factory TabData.fromJson(Map<String, dynamic> json) => TabData(
        code: json["code"],
        result: json["result"],
        gameDate:
            json["gameDate"] == null ? null : DateTime.parse(json["gameDate"]),
    
      );

  Map<String, dynamic> toJson() => {
        "code": code,
        "result": result,
        "gameDate":
            "${gameDate!.year.toString().padLeft(4, '0')}-${gameDate!.month.toString().padLeft(2, '0')}-${gameDate!.day.toString().padLeft(2, '0')}",
        
      };

  String get gameDateWeekday {
    if (gameDate == null) return '';
    final weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    return weekdays[gameDate!.weekday - 1];
  }
}

...(省略不需要用到的代码)
}

homepage:

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

class HomePage extends GetView<HomePageController> {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put<HomePageController>(HomePageController());
    final size = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test GetX Status'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Container(
            color: Colors.green,
            width: size,
            child: const Text(
              'Just a title',
              textAlign: TextAlign.center,
            ),
          ),
          // 我们可以从Controller得知,已经将TabData设置成状态管理的数据源,我们就会根据
          // 数据源来进行数据管理.
          controller.obx(
            (state) => Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'code: ${state?.code ?? '--/--'}',
                  ),
                  Text(
                    'game_date: ${state?.gameDate ?? '----'}',
                  ),
                ],
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () => controller.getNewestData(),
            child: const Text('Change it!'),
          )
        ],
      ),
    );
  }
}

homepage_controller:

import 'dart:convert';

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

import '../../models/tab_data.dart';

class HomePageController extends GetxController with StateMixin<TabData> {
  //需要初始化加载的数据
  @override
  void onInit() {
    super.onInit();
    // getNewestData();
  }

  Future<void> getNewestData() async {
    change(null, status: RxStatus.loading());
    try {
      final http.Response response =
          await http.get(Uri.parse('http://192.168.0.125:8001/getnewestdata'));

      if (response.statusCode == 200) {
        final jsonData = response.body;
        TabData data = TabData.fromJson(json.decode(jsonData));
        change(data, status: RxStatus.success());
      } else {
        change(null, status: RxStatus.error('Failed to get data'));
      }
    } catch (e) {
      change(null, status: RxStatus.error(e.toString()));
    }
  }
}

main

import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
import 'package:test_getx_status_management/pages/homepage/homepage_index.dart';

void main() {
  runApp(const MyApp());
}

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

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