Flutter文本标签处理插件tagged_text的使用

Flutter文本标签处理插件tagged_text的使用

TaggedText 库允许轻松构建带标签的文本作为 RichText。

通过带标签的文本构建 RichText。

安装

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

dependencies:
  tagged_text: ... // 最新版本号

使用

查看 /example 文件夹中的示例。

示例代码

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:tagged_text/tagged_text.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Tagged Text Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //
            // 这是 [TaggedText] 的开始部分。
            //
            TaggedText(
              textAlign: TextAlign.center,
              // 带标签的字符串。
              text: '你已经按了这些按钮之一\n次数为: <v>$_counter</v>\n标签也可以互相跨越',
              // 根 TextSpan 的设置。
              rootSettings: TagSettings(style: textTheme.bodyText1),
              // 每个标签的设置。
              tagsSettings: <String, TagSettings>{
                // 标签 'b' 带有蓝色 accent 颜色，并且点击时触发动作。
                'b': TagSettings(
                  style: textTheme.bodyText2?.apply(color: Colors.blueAccent),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      _incrementCounter();
                    },
                ),
                // 标签 'v' 带有特定主题。
                'v': TagSettings(style: textTheme.headline6),
                // 标签 'hl' 和 'hr' 相互交叉并合并其设置。
                'hl': TagSettings(
                  style: const TextStyle(
                    backgroundColor: Colors.deepPurple,
                    color: Colors.yellow,
                  ),
                ),
                'hr': TagSettings(
                  style: const TextStyle(
                    color: Colors.deepOrangeAccent,
                  ),
                ),
              },
            ),
            //
            // 这是 [TaggedText] 的结束部分。
            //
            const SizedBox(height: 30),
            // 如果你想仅使用 [TaggedText] 来应用不同的 [TextStyle]
            // 可以自由地使用它。
            TaggedText.style(
              text: '文本 <a>带有 <b>仅</b> 文本</a> 样式',
              rootStyle: textTheme.caption,
              tagsStyles: const <String, TextStyle>{
                'a': TextStyle(
                  backgroundColor: Colors.blueAccent,
                  color: Colors.yellow,
                ),
                'b': TextStyle(
                  color: Colors.deepOrangeAccent,
                ),
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}