8.3 主界面编写

8.3 主界面编写

实现步骤：

第 1 步：Bindings 依赖管理

主界面、首页、购物车、消息、我的 一共 5 个控制器，统一依赖载入

lib/pages/system/main/binding.dart

1
2
3
4
5
6
7
8
9
10
11
/// 主界面依赖
class MainBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut<HomeController>(() => HomeController());
    Get.lazyPut<CartIndexController>(() => CartIndexController());
    Get.lazyPut<MsgIndexController>(() => MsgIndexController());
    Get.lazyPut<MyIndexController>(() => MyIndexController());
    Get.lazyPut<MainController>(() => MainController());
  }
}

MsgIndexController 界面请自行添加，位置 lib/pages/msg/msg_index

第 2 步：router 路由加载

lib/common/routers/pages.dart

1
2
3
4
5
GetPage(
  name: RouteNames.main,
  page: () => const MainPage(),
  binding: MainBinding(),
),

第 3 步：视图中 GetBuilder 初始

lib/pages/system/main/view.dart

1
2
3
4
5
6
7
8
@override
Widget build(BuildContext context) {
  return GetBuilder<MainController>(
    init: Get.find<MainController>(),
    id: "main",
    builder: (_) => _buildView(),
  );
}

init: Get.find<MainController>() 采用 这种 find 的方式初始

其它几个界面是一样的不再重复说明

第 4 步：视图中 PageView 设置

lib/pages/system/main/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
...
        body: PageView(
          physics: const NeverScrollableScrollPhysics(), // 不响应用户的滚动
          controller: controller.pageController,
          onPageChanged: controller.onIndexChanged,
          children: const [
            HomePage(),
            CartIndexPage(),
            MsgIndexPage(),
            MyIndexPage(),
          ],
        ),

提交代码到 git