1.2 基于 GetFull 构建

Getx:Full Page 模块 - 自动触发, 页面架构(逻辑、页面、数据 分离)

pages目录结构 - 代码分层

使用getx插件工具, system目录右键选择 Getx:Full Page 命令输入login, 创建如下login模版结构，如login模块下生成的 页面架构目录

例如 login 模块的页面架构目录如下：

└── login ├── bindings.dart ├── controller.dart ├── index.dart ├── state.dart ├── view.dart └── widgets ├── hello.dart └── widgets.dart

理解页面架构

a.文件说明：

名称	说明
index.dart	导包
controller.dart	控制器 业务逻辑
state.dart	数据
view.dart	视图
bindings.dart	路由懒加载
widgets	子组件

b.阅读理解代码：

widgets/hello.dart

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

import '../../doc_flutter/index.dart';

/// hello
class HelloWidget extends GetView<LoginController> {
  const HelloWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Obx(() => Text(controller.state.title)),
    );
  }
}

在绑定路由时， binding 中加入你的模块依赖

GetPage(
    name: RouteNames.login,
    page: () => const LoginPage(),
    binding: LoginBinding(),
),

创建路由

lib/common/routers/pages.dart

import 'package:flutter_demo_getx_learn/pages/system/login/index.dart';
import 'package:get/get.dart';
class RoutePages {
  // 列表
  static List<GetPage> list = [
    GetPage(
      name: "/",
      page: () => const LoginPage(),
      binding: LoginBinding(),
    )
  ];
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo_getx_learn/common/routers/index.dart';
import 'package:get/get.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: "/",
      getPages: RoutePages.list,
      // home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

修改 login

lib/pages/system/login/controller.dart

class LoginController extends GetxController {
    LoginController();

    final state = LoginState();

    // tap
    void onTap(int index) {
      state.title = '点击了第$index个按钮';
    }
}

lib/pages/system/login/view.dart

// 主视图
Widget _buildView() {
    return Center(
        child: Column(
            children: [
                const HelloWidget(),
                ElevatedButton(
                onPressed: () {
                    controller.onTap(DateTime.now().microsecondsSinceEpoch);
                },
                child: const Text("点击"),
                ),
            ],
        ),
    );
}