Flutter文本样式插件flavor_text的使用

Flutter文本样式插件flavor_text的使用

插件简介

flavor_text 是一个轻量级且完全可定制的Flutter文本解析器。它允许你通过简单的字符串定义复杂的富文本，而无需手动构建 TextSpan 和 Text.rich。这使得编写富文本变得更加直观和简单。

安装

在你的 pubspec.yaml 文件中添加 flavor_text 作为依赖项：

dependencies:
  flavor_text: ^x.x.x  # 请根据最新版本号进行替换

然后运行 flutter pub get 来安装插件。

基本用法

flavor_text 使用标签组件来构建自定义的富文本。你可以通过简单的字符串定义文本样式，并直接在Widget树中使用。

示例1：基本文本样式

假设你想创建一个包含红色“world”的文本“Hello world”，你可以这样做：

final richText = 'Hello <style color="0xFFFF0000">world</style>';

[@override](/user/override)
Widget build(BuildContext context) {
  return Column(
    children: [
      FlavorText(richText),
    ],
  );
}

这段代码会渲染出“Hello world”，其中“world”是红色的。

示例2：带默认样式的文本

你可以为 FlavorText 提供默认样式和对齐方式：

FlavorText(
  richText,
  style: TextStyle(
    color: Colors.green,  // 默认文本颜色为绿色
  ),
  textAlign: TextAlign.center,  // 文本居中对齐
)

示例3：嵌套标签

你还可以嵌套多个标签来实现更复杂的文本样式：

final richText = 'Hello <style color="0xFFFF0000">world and <style fontWeight="bold">you</style></style>!';

[@override](/user/override)
Widget build(BuildContext context) {
  return Column(
    children: [
      FlavorText(richText),
    ],
  );
}

这段代码会渲染出“Hello world and you!”，其中“world”是红色的，“you”是加粗的。

高级用法

如果你需要更高级的功能，比如自定义标签，flavor_text 也提供了扩展机制。

创建自定义标签

假设你想创建一个标签，该标签会在文本中插入一个 Icons.help 图标。你可以通过继承 Tag 类并重写 build 方法来实现这一点：

class HelpTag extends Tag {
  [@override](/user/override)
  InlineSpan build(BuildContext context) {
    return WidgetSpan(child: Icon(Icons.help));
  }
}

然后在 main 函数中注册这个自定义标签：

void main() {
  // 注册自定义标签
  FlavorText.registerTag('help', () => HelpTag());

  runApp(MyApp());
}

现在你可以在文本中使用这个自定义标签：

FlavorText('This text will end in an icon <help/>');

带属性的自定义标签

如果你想为自定义标签添加属性以实现更细粒度的控制，比如改变图标的颜色，你可以这样做：

class HelpTag extends Tag {
  [@override](/user/override)
  List<Property> get supportedProperties => [Property('color')];

  [@override](/user/override)
  InlineSpan build(BuildContext context) {
    final colorValue = properties['color']?.value;
    var color = Colors.black;
    if (colorValue != null) {
      color = Color(int.parse(colorValue));
    }

    return WidgetSpan(
      child: Icon(
        Icons.help,
        color: color,
      ),
    );
  }
}

注册并使用带有属性的自定义标签：

void main() {
  FlavorText.registerTag('help', () => HelpTag());

  runApp(MyApp());
}

[@override](/user/override)
Widget build(BuildContext context) {
  return Column(
    children: [
      FlavorText('This text will end in a green icon <help color="0xFF00FF00"/>'),
    ],
  );
}

完整示例Demo

以下是一个完整的示例项目，展示了如何使用 flavor_text 插件来创建富文本：

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

void main() {
  // 注册自定义标签
  FlavorText.registerTag('help', () => HelpTag());

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flavor Text Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 基本文本样式
              FlavorText(
                'Hello <style color="0xFFFF0000">world</style>',
                style: TextStyle(fontSize: 24, color: Colors.green),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 20),

              // 嵌套标签
              FlavorText(
                'Welcome to <style color="0xFFFF0000">my amazing <style fontWeight="bold">App!</style></style>',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 20),

              // 自定义标签
              FlavorText(
                'This text will end in a <help color="0xFF00FF00"/>',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 自定义标签类
class HelpTag extends Tag {
  [@override](/user/override)
  List<Property> get supportedProperties => [Property('color')];

  [@override](/user/override)
  InlineSpan build(BuildContext context) {
    final colorValue = properties['color']?.value;
    var color = Colors.black;
    if (colorValue != null) {
      color = Color(int.parse(colorValue));
    }

    return WidgetSpan(
      child: Icon(
        Icons.help,
        color: color,
      ),
    );
  }
}