利用GetX 插件编写一个简单的消息页面 Flutter

1.新建五个文件

index.dart

message_page_logic.dart(逻辑处理)

message_page_state.dart（定义变量）

message_page_binding.dart（绑定）

message_page_view.dart（UI界面）

index.dart

library message_page;
export 'message_page_binding.dart';
export 'message_page_logic.dart';
export 'message_page_state.dart';
export 'message_page_view.dart';

message_page_state.dart（定义变量）

import 'package:get/get_rx/src/rx_types/rx_types.dart';

class MessagePageState {
  late List messageSources = [].obs;//定义列表数组
  MessagePageState() {
    ///Initialize variables
  }
}

message_page_binding.dart（绑定）

import 'package:get/get.dart';
import 'message_page_logic.dart';

class MessagePageBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => MessagePageLogic());
  }
}

message_page_logic.dart(逻辑处理)

重点：请求到数据后千万不能写成:state.messageSources = dateSources.result!

• 这种情况会不显示数据；obx刷新不了 UI界面；
• 智能能这样写：
• //这里必须循环添加数组数据;要不然不显示（这里是重点）

    for (int j = 0; j < dateSources.result!.length; j++) {
      state.messageSources.add(dateSources.result![j]);
    }
    

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'message_page_state.dart';
import '../../../model/MessageModel.dart';


class MessagePageLogic extends GetxController {
  final MessagePageState state = MessagePageState();

  @override
  void onInit() {
    super.onInit();
    _getTitleData();
  }

  void onReady() {
    // TODO: implement onReady
    super.onReady();
  }

  _getTitleData() async {
    //通过rootBundle.loadString();解析并返回
    String jsonData = await rootBundle.loadString("images/message.json");
    final jsonResult = json.decode(jsonData);
    var dateSources = MessageModel.fromJson(jsonResult);
    //这里必须循环添加数组数据;要不然不显示（这里是重点）
    for (int j = 0; j < dateSources.result!.length; j++) {
      state.messageSources.add(dateSources.result![j]);
    }
  }

  @override
  void onClose() {
    // TODO: implement onClose
    super.onClose();
  }
}

message_page_view.dart（UI界面）

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

class MessagePagePage extends StatelessWidget {
  final logic = Get.find<MessagePageLogic>();
  final state = Get.find<MessagePageLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('消息'),
        ),
        body: Obx(
          () => ListView.builder(
            itemCount: state.messageSources.length,
            itemBuilder: (BuildContext context, int index) {
              return state.messageSources.isNotEmpty
                  ? Container(
                      margin: const EdgeInsets.all(10),
                      color: Colors.white,
                      child: ListTile(
                        leading: const Icon(Icons.menu_sharp),
                        title: Text(
                          state.messageSources[index].title,
                          style: const TextStyle(fontSize: 17),
                        ),
                        subtitle: Text(
                          state.messageSources[index].subTitle,
                          style: const TextStyle(fontSize: 14),
                        ),
                      ))
                  : const Text('空');
            },
          ),
        ));
  }
}