Flutter网页便捷视图插件web_convenient_view的使用

本插件用于简化在网页浏览器中重新加载或直接加载视图。该插件兼容所有Flutter平台，并且支持哈希或路径URL策略。

如何使用

创建数据模型

首先，我们需要创建一个模型来包含视图所需的数据。

/// 示例数据模型，任何数据都可以在这里
class DataRequiredModel {
  /// 示例数据
  final String someData;

  const DataRequiredModel({
    required this.someData,
  });
}

创建需要数据加载的视图

接下来，我们创建一个需要数据才能正确加载的视图。在这个视图中，我们使用了之前创建的数据模型。

/// 需要数据才能正确加载的视图
class DataRequiredView extends StatelessWidget {
  /// 作为便利添加，可以以其他方式输入
  static const String routeName = "/data_required_view";

  /// 加载视图所需的数据（示例数据）
  final DataRequiredModel model;

  const DataRequiredView({
    super.key,
    required this.model,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              model.someData,
            ),
          ],
        ),
      ),
    );
  }
}

创建无需传递数据的视图

然后，我们创建一个无需传递数据即可加载的视图。这将是当DataRequiredView在网页浏览器中重新加载时返回的视图。在这个例子中，有一个按钮，当按下时会导航到DataRequiredView并传递一个DataRequiredModel对象。

/// 无需数据即可加载的首页视图
class HomeView extends StatelessWidget {
  /// 作为便利添加，可以以其他方式输入
  static const routeName = "/home_view";

  const HomeView({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /*
              按下时导航到DataRequiredView，并传递一个DataRequiredModel
            */
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  DataRequiredView.routeName,
                  arguments: const DataRequiredModel(
                    someData: "Data from home_view. Refresh this page in the web browser Ctrl+r",
                  ),
                );
              },
              child: const Text(
                "Navigate to data_required_view",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

设置MaterialApp路由

最后，我们需要设置MaterialApp的路由。请注意如何使用命名路由，并设置了主页。

void main() {
  runApp(
    MaterialApp(
      routes: {
        // 不需要任何数据即可加载的路由，注意它是主页
        HomeView.routeName: (_) => const HomeView(),
        /*
          当页面在浏览器中重新加载或直接加载时，使用WebConvenientView。
          支持哈希或路径URL策略。
          注意通用数据是DataRequiredModel，这是将传递给DataRequiredView的数据类型
        */

        // 设置路由名称，并返回一个带有DataRequiredModel通用数据的WebConvenientView
        DataRequiredView.routeName: (_) => WebConvenientView<DataRequiredModel>(
              // 设置backRoute，这是如果DataRequiredView被重新加载或直接在网页浏览器中加载时要导航到的路由。不应该需要数据来加载。
              backRoute: HomeView.routeName,

              // 加载DataRequiredView的地方，并接收其数据模型。
              // 如果重新加载或直接加载在网页浏览器中，则不会运行
              onLoaded: (model) => DataRequiredView(
                model: model,
              ),
            ),
      },

      // 一个不需要任何数据即可加载的视图
      home: const HomeView(),
    ),
  );
}