[Flutter] Getx状态管理demo

Getx状态管理

接口

https://jdmall.itying.com/api/pcate

示例demo地址

状态管理小demo

结构图

示例图

Model

class GoodsModel {
  List<Result>? result;
  GoodsModel({this.result});
  GoodsModel.fromJson(Map<String, dynamic> json) {
    if (json['result'] != null) {
      result = <Result>[];
      json['result'].forEach((v) {
        result!.add(new Result.fromJson(v));
      });
    }
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.result != null) {
      data['result'] = this.result!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}
class Result {
  String? sId;
  String? title;
  String? pic;
  String? pid;
  String? sort;

  Result({this.sId, this.title, this.pic, this.pid, this.sort});

  Result.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
    pic = json['pic'];
    pid = json['pid'];
    sort = json['sort'];
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['title'] = this.title;
    data['pic'] = this.pic;
    data['pid'] = this.pid;
    data['sort'] = this.sort;
    return data;
  }
}

home页面

states

import 'package:get/get.dart';
import 'package:getx_demo/app/data/GoodsModel.dart';
class HomeState{
    ///用来存储初始化列表的数据
  RxList<Result> goodsData=<Result>[].obs;
    ///用来存储收藏的商品的实例
  RxList<Result> likeList=<Result>[].obs;
}

controllers

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demo/app/data/GoodsModel.dart';
import 'package:getx_demo/app/modules/home/states/home_state.dart';
import 'package:dio/dio.dart';

import '../../../routes/app_pages.dart';
class HomeController extends GetxController {
  HomeState state =HomeState();
///获取数据，赋值给goodsData
  getData()async{
    final response= await Dio().get('https://jdmall.itying.com/api/pcate');
    final goodsList = GoodsModel.fromJson(response.data);
    state.goodsData.value=goodsList.result!;
  }
    ///跳转到second页面，把当前index的goodsData实例传过去
  toDetail(int index){
    Get.toNamed(Routes.SECOND,arguments: state.goodsData[index]);
  }

  @override
  void onInit() {
    super.onInit();
      ///初始化获取数据方法
    getData();
  }
  @override
  void onReady() {
    super.onReady();
  }
  @override
  void onClose() {}
}

views

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

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Obx(() {
          return Text('状态管理');
        }),
        centerTitle: true,
      ),
      body: Obx(() {
        return ListView.builder(
            itemCount: controller.state.goodsData.length,
            itemBuilder: (context, index) {
                ///显示列表数据
              return ListTile(
                title: Text(controller.state.goodsData[index].title ??
                    ''),
                trailing: InkWell(
                    onTap: () {
                      controller.toDetail(index);
                    },
                    ///此处要再加一个Obx
                    ///如果存储收藏的列表likeList包含当前index的goodsData，显示已收藏
                    child: Obx(() {
                      return Text(controller.state.likeList.contains(
                          controller.state.goodsData[index]) ? '已收藏' : '收藏商品');
                    })
                ),
              );
            });
      }),
    );
  }
}

second页面

states

import 'package:get/get.dart';
import '../../../data/GoodsModel.dart';
class SecondState{
  Result Detail=Result();
}

controllers

import 'package:get/get.dart';
import 'package:getx_demo/app/data/GoodsModel.dart';
import 'package:getx_demo/app/modules/home/controllers/home_controller.dart';
import 'package:getx_demo/app/modules/second/states/second_state.dart';

class SecondController extends GetxController {
  SecondState state =SecondState();
  ///获取home页面的controller
  final controllerP=Get.find<HomeController>();
 ///如果home的存储收藏的likeList里的实例的sId包含了当前实例的sId，返回true
  bool isLike(Result result){
    return  controllerP.state.likeList.any((element) => element.sId==result.sId);
  }
  ///把当前实例存储到likeList里
  addLike(Result result){
    controllerP.state.likeList.add(result);
  }
  ///从likeList移除当前实例
  removeLike(Result result){
      controllerP.state.likeList.remove(result);
  }

  @override
  void onInit() {
    super.onInit();
    ///接收第一页传过来的实例，赋值给Detail
    state.Detail=Get.arguments;
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {}
}

views

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/second_controller.dart';

class SecondView extends GetView<SecondController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('SecondView'),
          centerTitle: true,
        ),
        body: Obx(() {
          return Row(
            children: [
              Text(controller.state.Detail.title ?? ''),
              IconButton(onPressed: () {
                  ///是否已收藏，是的话移除当前实例，否的话添加当前实例
                controller.isLike(controller.state.Detail)?controller.removeLike(controller.state.Detail):controller.addLike(controller.state.Detail);
              },
                  icon: Icon(Icons.favorite,
                             ///是否已收藏，是的话颜色为红，否的话为灰色
                      color: controller.isLike(controller.state.Detail)
                          ? Colors.red
                          : Colors.grey))
            ],
          );
        })
    );
  }
}