Flutter微框架Nylo(七):控制器

275 阅读2分钟

在开始之前,让我们回顾一下控制器的概念,以下是 tutorialspoint.com 的快速摘要。

控制器负责控制应用程序逻辑,并充当视图和模型之间的协调器。 控制器通过视图接收来自用户的输入,然后在模型的帮助下处理用户的数据,并将结果传递回视图。

带服务的控制器。

class HomeController extends Controller {

  AnalyticsService analyticsService;
  NotificationService notificationService;

  @override
  construct(BuildContext context) {
    // 服务
    analyticsService = AnalyticsService();
    notificationService = NotificationService();
  }

  bool sendMessage(String message) async {
    bool success = await this.notificationService.sendMessage(message);
    if (success == false) {
      this.analyticsService.sendError("failed to send message");
    }
    return success;
  }

  onTapDocumentation() {
    launch("https://nylo.dev/docs");
  }

从页面调用控制器。

class MyHomePage extends NyPage<HomeController> {
  ...
  MaterialButton(
    child: Text("Documentation"),
    onPressed: controller?.onTapDocumentation, // 调用事件
  ),

或从小部件。

class _MyHomePageState extends NyState<MyHomePage> {
  ...
  MaterialButton(
    child: Text("Documentation"),
    onPressed: widget.controller.onTapDocumentation, // 调用事件
  ),

如果组件具有控制器,则可以使用widget.controller访问其属性。

可以使用命令 dart run nylo_framework:main make:page account --controller 自动创建新页面和控制器。

1. 创建页面和控制器

您可以使用Metro CLI工具自动创建页面和控制器。

dart run nylo_framework:main make:page dashboard_page --controller
// 或者
dart run nylo_framework:main make:page dashboard_page -c

这将在app/controllers目录中创建一个新控制器,并在resources/pages目录中创建一个页面。

或者,可以使用以下命令创建单个控制器。

dart run nylo_framework:main make:controller profile_controller

从路由中检索参数:如果需要将数据从一个组件传递到另一个组件,可以使用Navigator类或使用routeTo发送数据。

// 从另一个页面发送一个对象
User user = new User();
user.firstName = 'Anthony';

Navigator.pushNamed(context, '/profile', arguments: user);
// 或者
routeTo(ProfilePage.path, data: user);

当我们导航到“Profile”页面时,我们可以调用 data() 以从上一页获取数据。

class ProfilePage extends NyPage {
  
  @override
  init() async {
    super.init();
    dynamic data = data(); // 从上一页传递的数据
    
    User user = data;
    print(user.firstName); // Anthony
  }

或从 StatefulWidget

class _ProfilePageState extends NyState<ProfilePage> {
  
  @override
  init() async {
    super.init();
    dynamic data = widget.data(); // 从上一页传递的数据
    
    User user = data;
    print(user.firstName); // Anthony
  }

routeTo(String routeName, data: dynamic) 数据参数接受动态类型,因此可以在返回对象后对其进行转换。

2. 将控制器与 NyPage 配合使用

NyPage 小部件使控制器易于使用。

可以通过先扩展 NyPage 类,然后设置控制器来使用控制器,如以下示例所示。

import 'package:nylo_framework/nylo_framework.dart';
import '/app/controllers/my_controller.dart'; // 导入控制器

class HomePage extends NyPage<MyController> {
    
    // 页面创建时初始化
    init() async {
        // access the controller
        controller.doSomething(); // 调用控制器事件
        controller.data(); // 从上一页传递的数据
        controller.queryParameters(); // query parameters passed from a previous page
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            title: Text("My Page"),
        ),
        body: Center(
            child: Text("Hello World"),
        ),
        );
    }
}

请务必在 config/decoders.dart 文件中设置控制器,如以下示例所示。

import 'package:nylo_framework/nylo_framework.dart';

...

final Map<Type, BaseController> controllers = {
  HomeController: HomeController(),

  MyNewController: MyNewController(), // 新控制器
  // ...
};

您还应该将所有控制器添加到 Nylo,如以下示例所示: 1). 打开 app/providers/app_provider.dart 2). 添加控制器

import 'package:nylo_framework/nylo_framework.dart';

...

class AppProvider implements NyProvider {
  @override
  boot(Nylo nylo) async {
    ...
    nylo.addControllers(controllers); // 控制器添加到 Nylo

    return nylo;
  
  }
...

现在,您应该可以在 NyPage 中使用控制器了.