Flutter标签管理插件tagser的使用

Flutter标签管理插件tagser的使用

概述

tagser 是一个用于 Dart 开发者的库。

这是一个简单的基于标签的文档解析器。它不是关于 HTML 解析的，你可以使用任何你想要的标签。

可用的标签类型：

  • 自闭合标签：<tag [attributes]/>
  • 块标签：<tag [attributes]> Body </tag>

属性类型：

  • 布尔值：
  • 带值：

方法

parse(String source)
  • 将源字符串中的标签解析为 Tag 对象列表。
html(List<Tag> tags)
  • 将 Tag 对象列表转换为正确的 HTML 内容。

使用

一个简单的使用示例：

import 'package:tagser/tagser.dart';

void main() {
  var tagser = new Tagser();
  var source = '<line show/><hello> Hello bro </hello><br />';

  var tags =  tagser.parse(source);
  var html = tagser.html(tags);

  print(html); // 打印: <line show="true"></line><hello> Hello bro </hello><br></br>
}

注意事项

  • 标签名是区分大小写的。块标签声明中的打开和关闭标签应该具有相同的拼写。可以通过传递 "ignoreCase": true 作为选项到 Tagser 来改变这一点。
  • 属性名也是区分大小写的：属性 A 和属性 a 不是同一个。

限制

  • 所有自闭合标签应在关闭括号前加上斜杠。使用 <br> 标签而没有斜杠会导致错误。
  • 在标签名称和左尖括号之间不允许有空格：< tag /> - 会导致错误。
  • 在斜杠和右尖括号之间不允许有空格：<tag / > - 会导致错误。
  • 在属性声明中不允许有空格：
    • <tag A = 'value'/> - 错误
    • <tag A= 'value'/> - 错误
    • <tag A ='value'/> - 错误

选项

你可以通过 Tagser 构造函数传递选项或使用 setOption() 方法设置它们。

可用的选项：

  • ignoreCase - 启用或禁用忽略打开和关闭标签的大小写；默认为 false。

示例代码

以下是一个完整的示例代码，展示了如何使用 tagser 插件解析和生成 HTML 内容。

import 'package:tagser/tagser.dart';

void main() {
  final t = Tagser();

  final source = '''
    <schema>
      <header>
        <cell>№</cell>
        <cell>Name</cell>
        <cell>Lastname</cell>
        <cell>Age</cell>
      </header>
      <row>
        <cell>1</cell>
        <cell>John</cell>
        <cell>Doe</cell>
        <cell>45</cell>
      </row>
      
      <row>
        <cell>2</cell>
        <cell>Alice</cell>
        <cell>Doe</cell>
        <cell>40</cell>
      </row>
      
      <row>
        <cell>3</cell>
        <cell>Mike</cell>
        <cell>Doe</cell>
        <cell>25</cell>
      </row>
    </schema>
  ''';

  final tags = t.parse(source);

  print(tags);
}

更多关于Flutter标签管理插件tagser的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter标签管理插件tagser的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tagsist 是一个用于管理标签的 Flutter 插件，可以帮助开发者轻松地在应用程序中实现标签的添加、删除、编辑和显示功能。以下是使用 tagsist 插件的一个基本示例和步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 tagsist 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  tagsist: ^0.1.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 tagsist 插件：

import 'package:tagsist/tagsist.dart';

3. 使用 Tagsist 组件

Tagsist 组件允许你显示和管理标签。以下是一个简单的示例，展示如何在 Flutter 应用程序中使用 Tagsist：

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

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

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

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

class _TagsistExampleState extends State<TagsistExample> {
  List<String> tags = ['Flutter', 'Dart', 'Mobile', 'Development'];

  void _addTag(String tag) {
    setState(() {
      tags.add(tag);
    });
  }

  void _removeTag(String tag) {
    setState(() {
      tags.remove(tag);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tagsist Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Tagsist(
              tags: tags,
              onTagAdded: _addTag,
              onTagRemoved: _removeTag,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 添加新标签
                _addTag('New Tag');
              },
              child: Text('Add Tag'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部