Flutter文本格式化插件simple_formatted_text的使用

简介

simple_formatted_text 是一个简单的文本小部件，用于显示格式化的文本，包括链接文本。此插件允许您使用特殊字符来自定义文本样式。

快速开始

导入库

在你的项目中导入以下库：

dependencies:
  simple_formatted_text: ^最新版本号

或者直接运行命令添加依赖：

flutter pub add simple_formatted_text

基本实现

使用 SimpleFormattedText 显示带格式的文本：

SimpleFormattedText("Text with *bold* word")

更多功能

打开URL

你可以通过点击链接来打开URL，并自定义链接文本的颜色：

SimpleFormattedText(
    "Open [Google](https://google.com/) to search things",
    onLinkTap: (link) {
        // 执行一些操作，不仅仅是打开网页链接
        url_launch(link);
    },
)

文本动作

你还可以为不同的文本动作设置不同的样式：

SimpleFormattedText(
    "Do [action 1](action 1) or [action 2](action 2)",
    linkTextStyle: TextStyle(color: Colors.green),
    onLinkTap: (actionStr) {
        switch(actionStr) {
            case "action 1":
                // 处理 action 1
                break;
            case "action 2":
                // 处理 action 2
                break;
        },
    },
)

改变颜色和大小

你也可以改变文本的颜色和大小，并且可以设置初始文本样式：

SimpleFormattedText(
    "This is a _[big and red](addSize:4,color:#FFFF0000)_ string",
    style: TextStyle(color: Colors.deepPurple, fontSize: 20),
)

完整示例

以下是一个完整的示例代码，展示了如何使用 simple_formatted_text 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  String _text =
      "This is an *EXAMPLE* of a [big](addSize:4, color:#FFFF0000) ~[small](subSize:2)~ /_Widget_/";

  [@override](/user/override)
  void initState() {
    _controller.text = _text;
    super.initState();
  }

  void _updateText() {
    setState(() {
      _text = _controller.text;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 600,
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _controller,
                      onSubmitted: (value) => _updateText(),
                      decoration: const InputDecoration(
                          label: Text("插入测试文本")),
                    ),
                  ),
                  IconButton(
                      onPressed: _updateText, icon: const Icon(Icons.send)),
                ],
              ),
            ),
            const SizedBox(height: 20),
            SimpleFormattedText(_text),
            const SizedBox(height: 20),
            SimpleFormattedText(
              _text,
              linkTextStyle: TextStyle(color: Colors.green),
            ),
            const SizedBox(height: 20),
            SimpleFormattedText(
              _text,
              style: TextStyle(color: Colors.deepPurple, fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}