flutter: getx实现controller和view分离

一，代码:

目录结构 ：

1,route

import 'package:get/get.dart';
import 'package:getxdemo1/middlewares/AuthMiddleware.dart';
import 'package:getxdemo1/pages/NextPage.dart';
import 'package:getxdemo1/pages/HomePage.dart';
import 'package:getxdemo1/pages/LoginPage.dart';
import 'package:getxdemo1/pages/counter/CounterView.dart';

class APPage {
  static final routes = [
    GetPage(name: '/', page: () => HomePage()),
    GetPage(name: '/login', page: () => LoginPage()),

    GetPage(name: "/counter", page: () => CounterView(),),
    GetPage(name: "/next", page: () => NextPage(),
        middlewares: [AuthMiddleware(),]
       ),
  ];
}

2,controller

import 'package:get/get.dart';

// 定义控制器
class CounterController extends GetxController {
  var count = 0.obs;
  void increment() {
    count++;
  }
}

3,view

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

// 使用GetView
class CounterView extends GetView<CounterController> {
  CounterController controller = Get.put(CounterController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetView Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('Count: ${controller.count.value}')),
            ElevatedButton(
              onPressed: controller.increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

 

二，测试效果: