Flutter规范URL生成插件canonical_url的使用

Flutter规范URL生成插件canonical_url的使用

canonical_url简介

UrlCanonicalizer 用于将URL转换为标准（规范化）形式。它会执行以下操作：

• 将 scheme 和 host 转换为小写
• 如果端口是默认值（80, 443），则移除端口
• 规范化 path（例如，/a/../，/a/./）
• 排序查询参数（默认行为）
• 支持自定义查询参数排序（可选）
• 支持参数白名单/黑名单（可选）
• 移除 fragment（可选）

此外，它还可以根据上下文（例如，基础URL + 相对链接）计算URL。

使用方法

下面是一个简单的使用示例，展示了如何使用 canonical_url 插件来规范化URL。

import 'package:canonical_url/canonical_url.dart';

void main() {
  // 创建一个 UrlCanonicalizer 实例，并设置移除 fragment
  final urlc = UrlCanonicalizer(removeFragment: true);

  // 示例1：规范化带有默认端口的URL
  // 输入: http://example.com:80/a/../b.txt
  // 输出: http://example.com/b.txt
  print(urlc.canonicalize('http://example.com:80/a/../b.txt'));

  // 示例2：规范化带有 fragment 的 HTTPS URL
  // 输入: https://example.com/abc#xyz
  // 输出: https://example.com/abc
  print(urlc.canonicalize('https://example.com/abc#xyz'));

  // 示例3：规范化带有查询参数的 URL
  // 输入: http://example.com/api?c=1&a=2&b=3
  // 输出: http://example.com/api?a=2&b=3&c=1
  print(urlc.canonicalize('http://example.com/api?c=1&a=2&b=3'));
}

完整示例Demo

为了更好地理解 canonical_url 插件的使用，下面提供了一个完整的Flutter项目示例，展示了如何在Flutter应用中集成和使用 canonical_url。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 canonical_url 依赖：

dependencies:
  flutter:
    sdk: flutter
  canonical_url: ^最新版本号

2. 创建主文件 main.dart

接下来，创建一个简单的Flutter应用程序，并在其中使用 canonical_url 来规范化URL。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Canonical URL Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CanonicalUrlPage(),
    );
  }
}

class CanonicalUrlPage extends StatefulWidget {
  [@override](/user/override)
  _CanonicalUrlPageState createState() => _CanonicalUrlPageState();
}

class _CanonicalUrlPageState extends State<CanonicalUrlPage> {
  final TextEditingController _urlController = TextEditingController();
  String _canonicalUrl = '';

  final UrlCanonicalizer _urlc = UrlCanonicalizer(removeFragment: true);

  void _canonicalizeUrl() {
    final inputUrl = _urlController.text;
    if (inputUrl.isNotEmpty) {
      setState(() {
        _canonicalUrl = _urlc.canonicalize(inputUrl);
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Canonical URL Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _urlController,
              decoration: InputDecoration(
                labelText: '输入URL',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _canonicalizeUrl,
              child: Text('规范化URL'),
            ),
            SizedBox(height: 20),
            if (_canonicalUrl.isNotEmpty)
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '规范化后的URL:',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  SelectableText(_canonicalUrl),
                ],
              ),
          ],
        ),
      ),
    );
  }
}