Flutter获取窗口位置及URL插件window_location_href的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter获取窗口位置及URL插件 window_location_href 的使用

window_location_href 是一个跨平台实现的插件，用于获取当前页面的 URL（类似于 JavaScript 中的 window.location.href）以及用户代理信息（window.navigator.userAgent）。该插件支持多个平台，包括 Android、iOS、Web 和桌面端。

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter Desktop

快速开始

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  window_location_href: any

2. 使用插件

导入并使用插件：

import 'package:window_location_href/window_location_href.dart';

final String? location = href;

上述代码会返回当前页面的 URL（仅限 Web 平台），其他平台上返回 null。

示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 应用中使用 window_location_href 插件来检测当前是否在 Web 环境，并显示当前页面的 URL。

完整代码示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: href == null
            ? const Text(
                'You are not on web.',
              )
            : Text(
                'You are here: $href',
              ),
      ),
    );
  }
}

解释

  1. 导入插件：首先通过 import 'package:window_location_href/window_location_href.dart'; 导入插件。

  2. 检查环境：使用 href 变量来判断当前是否在 Web 环境。如果 href 不为 null，则表示当前运行在 Web 环境中，并且可以获取到当前页面的 URL。

  3. UI 展示：根据 href 是否为空，展示不同的文本内容。如果是在 Web 环境中，则显示当前页面的 URL；否则提示用户当前不在 Web 环境。

总结

通过 window_location_href 插件，你可以轻松地在 Flutter 应用中获取当前页面的 URL（仅限 Web 环境），并且可以在不同平台上进行适配处理。希望这个示例能帮助你更好地理解和使用该插件！


更多关于Flutter获取窗口位置及URL插件window_location_href的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter获取窗口位置及URL插件window_location_href的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 window_location_href 插件来获取 Flutter Web 应用中的窗口位置（尽管通常浏览器窗口位置通过 JavaScript 获取更为直接，而该插件主要关注 URL）以及 URL 的示例代码。需要注意的是，window_location_href 插件主要用于 Flutter Web，因为它依赖于 web 相关的功能。

首先，确保你的 Flutter 项目已经添加了 window_location_href 依赖。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  window_location_href: ^0.1.0  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter Web 应用中，你可以按照以下方式使用 window_location_href 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Window Location and URL Example'),
        ),
        body: Center(
          child: FutureBuilder<Map<String, dynamic>>(
            future: _getLocationAndUrl(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  Map<String, dynamic> data = snapshot.data!;
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('URL: ${data['href']}'),
                      // 注意：通常窗口位置（如 x, y 坐标）不是通过此插件获取的，
                      // 而是通过 JavaScript 与 Dart 的互操作来获取。
                      // 这里只是为了展示如何处理返回的数据结构。
                      // 例如，可以添加对 hostname, pathname 等的显示。
                      Text('Hostname: ${Uri.parse(data['href']).hostname}'),
                      Text('Path: ${Uri.parse(data['href']).path}'),
                    ],
                  );
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

  Future<Map<String, dynamic>> _getLocationAndUrl() async {
    // 获取 URL
    String href = await WindowLocationHref.href;
    
    // 注意：这里我们并没有真正获取窗口的位置（x, y），
    // 因为在 Flutter Web 中这通常不是通过 Dart 直接获取的。
    // 如果确实需要窗口位置，可以考虑使用 JavaScript 与 Dart 的互操作。
    
    // 返回一个包含 URL 信息的 Map
    return {'href': href};
  }
}

在这个示例中，我们创建了一个简单的 Flutter Web 应用，使用 window_location_href 插件来获取当前窗口的 URL，并在界面上显示。_getLocationAndUrl 函数异步获取 URL，并通过 FutureBuilder 在界面上展示结果。

关于窗口位置（如 x, y 坐标），通常这不是通过 Flutter 或 Dart 直接获取的，而是需要通过 JavaScript 与 Dart 的互操作来实现。如果你确实需要这些信息，可以考虑使用 dart:html 库中的 JavaScript 通道来获取。但请注意，这通常只在 Flutter Web 应用中可行。

回到顶部