flutter:用getx实现controller和view分离

一，代码：

controller:

import 'package:get/get.dart';
import 'package:dio/dio.dart';
import 'dart:convert';
import 'dart:io';

// 定义控制器
class DetailController extends GetxController {

  var title = "标题".obs;
  var author = "作者".obs;
  var content = "吟诗一首".obs;

  Future<void> getData() async {
    String url = "http://www.nihonnoma.net/detail.php";
    var res = await getHttp(url);
    print(res);
    if (res['status'] == 'success') {
      //setState(() {
      content.value = res['data']['content'];
      title.value = res['data']['title'];
      author.value = res['data']['author'];
    } else {
      print("报错:"+res['message']);
    }
  }

  Future<Map<String, dynamic>> getHttp(String url) async {
    Map<String,dynamic> res = {};
    try {
      final response = await Dio().get(url);
      print(response);

      if (response.statusCode == HttpStatus.ok) {
        var data= jsonDecode(response.toString());
        print(data);
        //setContent(data['data']['content'],data['data']['title'],data['data']['author']);
        res['data'] = data['data'];
        res['status'] = 'success';
        res['message'] = '';
        return res;
      } else {
        res['data'] = {};
        res['status'] = 'failed';
        res['message'] = 'response.statusCode:'+response.statusCode.toString();
        return res;
      }
    } catch (e) {
      print(e.toString());
      res['data'] = {};
      res['status'] = 'failed';
      res['message'] = 'exception:'+e.toString();
      return res;
    }
  }
}

view:

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

// 使用GetView
class DetailView extends GetView<DetailController> {
  DetailController controller = Get.put(DetailController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetView Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                print("按钮被点击了：");
                controller.getData();
              },
              child: Text(
                '获取远程数据',
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
            ),

            Obx(() => Text('标题: ${controller.title.value}')),
            Obx(() => Text('作者: ${controller.author.value}')),
            Obx(() => Text('${controller.content.value}', style: Theme.of(context).textTheme.headlineMedium,)),

          ],
        ),
      ),
    );
  }
}

 

二，测试效果：