Flutter3.0 仿微博瀑布流 - GetX构建页面Flutter3.0 仿微博瀑布流 - GetX构建页面 - b

项目地址

有疑问请关注公众号 fullstack2022，答疑：

GetX构建微博瀑布流页面

我们把微博瀑布流页面命名为HomePage，首先我们来看一下其在项目目录中的位置：

在pages目录下新建home目录来存放瀑布流页面。
根据GetX构建页面的步骤，创建3个文件，分别是：

home_binding.dart
home_controller.dart
home_page.dart

根据MVC的理论，home_controller.dart就是controller，它是控制器，数据源和逻辑方法都定义在这个文件中。home_page.dart是写该页面布局的地方。而home_binding.dart则是将controller绑定到page上的绑定器，也就是说由home_controller.dart来控制home_page.dart。

首先，我们需要在路由文件app_pages.dart中定义微博瀑布流页面：

app_pages.dart

abstract class AppPages {
  static final pages = [
    //主页
    GetPage(name: Routes.HOME, page: () => HomePage(), binding: HomeBinding()),
  ];
}

可以看到，使用GetPage类创建一个页面实例，这个构造方法有3个参数，第1个是当前页面的路由名称，方便进行路由跳转；第2个则是page-HomePage（微博瀑布流页面布局的地方）；第3个是binding-HomeBinding绑定器。
那有人就会问，上面提到的controller在哪里？binding是如何将controller绑定到page上的？

Binding

我们在home_binding.dart中定义这种绑定关系。

home_binding.dart

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    LogUtil.v("HomeBinding");

    Get.put<HomeController>(HomeController());
  }
}

使用Get.put<HomeController>(HomeController());定义这种绑定关系。

Controller

直接来看代码：

home_controller.dart

class HomeController extends GetxController {

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

  @override
  void onReady() async {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }
}

HomeController继承GetxController，并重写了它的3个关于生命周期的函数。

onInit 页面page状态初始化时调用
onReady 页面page绘制完成时调用
onClose 页面page析构时调用

同时我们需要在HomeController中定义page需要的数据属性等。

Page

page则是定义页面布局的地方

home_page.dart

class HomePage extends StatelessWidget {
  final HomeController homeController = Get.find<HomeController>();

  @override
  Widget build(BuildContext context) {
    LogUtil.v("HomePage");

    return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
            child: Container()
            )
    );
  }

这里注意一点，我们使用Get.find<>获取该页面的控制器。获取到控制器便能使用控制器的数据渲染该页面，或调用控制器中的方法来响应用户的交互动作。

  final HomeController homeController = Get.find<HomeController>();

具体的页面布局和逻辑，我们将在后面的小节中讲解。