Flutter网页视图展示插件simple_dart_web_views的使用

简介

simple_dart_web_views 是一个用于在 Dart 中创建单页应用（SPA）的库。需要注意的是，它与 Flutter 不兼容。该库基于 simple_dart_web_widgets。

主要功能

• MainWindow：包含全局组件（如导航菜单）和可切换的视图区域。
• Views：所有视图都继承自 View 类，并且每个视图只有一个实例。
• 主题切换：支持通过 switchTheme 方法切换主题。
• 错误处理：提供基本的错误显示方法 showError 和 showFatalError。

使用步骤

以下是一个完整的示例，展示如何使用 simple_dart_web_views 创建一个简单的单页应用。

1. 添加依赖

在 pubspec.yaml 文件中添加 simple_dart_web_views 依赖：

dependencies:
  simple_dart_web_views: ^0.1.0

运行 flutter pub get 安装依赖。

2. 创建主窗口和视图

MainWindow 配置

MainWindow 是应用的核心，负责管理全局组件和视图区域。

import 'package:simple_dart_web_views/simple_dart_web_views.dart';

class MyMainWindow extends MainWindow {
  [@override](/user/override)
  void configureMainWindow() {
    // 添加全局组件
    addGlobalComponent(SimpleNavBar());
    addGlobalComponent(SimplePathPanel());

    // 设置默认主题
    switchTheme('default_theme');
  }
}

视图类定义

所有视图都必须继承自 View 类，并设置唯一的标识符 d 和标题 caption。

class HomeView extends View {
  [@override](/user/override)
  String get d => 'home';

  [@override](/user/override)
  String get caption => '首页';

  [@override](/user/override)
  void init(String params) {
    print('HomeView 初始化参数: $params');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('欢迎来到首页！'),
    );
  }
}

class AboutView extends View {
  [@override](/user/override)
  String get d => 'about';

  [@override](/user/override)
  String get caption => '关于我们';

  [@override](/user/override)
  void init(String params) {
    print('AboutView 初始化参数: $params');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是关于我们页面。'),
    );
  }
}

3. 启动应用

在 main.dart 文件中启动应用：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyMainWindow(
        views: [
          HomeView(),
          AboutView(),
        ],
      ),
    );
  }
}

4. 导航测试

运行应用后，可以通过 URL 参数进行导航。例如：

• 访问 #home 显示首页。
• 访问 #about 显示关于我们页面。

你也可以传递参数，例如：

• #home?name=John 将参数传递给 HomeView 的 init 方法。

全局组件示例

SimpleNavBar（导航菜单）

class SimpleNavBar extends GlobalComponent {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).openPath('#home');
            },
            child: Text('首页'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).openPath('#about');
            },
            child: Text('关于我们'),
          ),
        ],
      ),
    );
  }
}

SimplePathPanel（显示当前路径）

class SimplePathPanel extends GlobalComponent {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      color: Colors.grey[200],
      child: Center(
        child: Text(
          Navigator.of(context).currentPath,
          style: TextStyle(fontSize: 12),
        ),
      ),
    );
  }
}

主题切换

MainWindow 提供了 switchTheme 方法来切换主题。例如：

switchTheme('super_theme');

主题文件需要以 _theme.css 结尾，例如 super_theme.css。

错误处理

MainWindow 提供了 showError 和 showFatalError 方法来处理错误。你可以根据需要重写这些方法。

[@override](/user/override)
void showError(String message) {
  print('错误: $message');
}

[@override](/user/override)
void showFatalError(String message) {
  print('致命错误: $message');
}