Flutter自定义视图控制器插件simple_dart_view_controller的使用

简介

simple_dart_view_controller 是一个用于在Dart中创建单页应用（SPA）的库。它提供了 ViewController 和 AbstractView 类，用于管理视图的切换和状态保存。

ViewController

ViewController 是管理视图的核心类。它在应用启动时被创建和初始化，并通过全局变量 viewController 调用。它订阅了 window.onHashChange 事件，并根据哈希变化更新视图。

ViewController方法

class ViewController {
  // 显示指定的视图
  void openView(AbstractView view);

  // 按照URL路径显示视图
  void openPath(String path);

  // 保存状态到窗口的哈希中，不重新初始化视图
  void saveState(Map<String, String> newState);

  // 生成视图的完整路径
  String generateFullPath(AbstractView view);

  // 从参数生成视图的部分路径
  String generatePathPart(String id, Map<String, String> params);
}

AbstractView

AbstractView 是一个抽象类，用于表示可变的应用程序屏幕。每个应用程序都需要实现自己的 AbstractView 子类，并命名为 View。

AbstractView属性

class AbstractView {
  // 唯一的ID，用于URL导航
  String id;

  // 视图的标题，用于菜单和其他导航组件
  String caption;

  // 父视图（如果有）
  AbstractView parent;

  // 参数和状态，从URL解析并传递给初始化方法
  Map<String, String> params;
  Map<String, String>? state;
}

使用示例

以下是一个完整的示例，展示了如何使用 simple_dart_view_controller 插件。

项目结构

lib/
├── main.dart
└── views/
    ├── home_view.dart
    └── about_view.dart

主文件 main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Simple Dart View Controller')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 打开Home视图
              viewController.openView(HomeView());
            },
            child: Text('Go to Home'),
          ),
        ),
      ),
    );
  }
}

视图文件 home_view.dart

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

class HomeView extends AbstractView {
  HomeView()
      : super(
          id: 'home',
          caption: 'Home',
        );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(caption)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to the Home Page!'),
            ElevatedButton(
              onPressed: () {
                // 打开About视图
                viewController.openView(AboutView());
              },
              child: Text('Go to About'),
            ),
          ],
        ),
      ),
    );
  }
}

视图文件 about_view.dart

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

class AboutView extends AbstractView {
  AboutView()
      : super(
          id: 'about',
          caption: 'About',
        );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(caption)),
      body: Center(
        child: Text('This is the About Page.'),
      ),
    );
  }
}