如何在Flutter中使用RichText实现指定样式的文本对齐UI效果

以下是完整可运行的实现代码，支持自定义不同段落的样式、插入自定义组件、绑定点击事件，你可以根据你的UI需求调整各个TextSpan的样式参数：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('RichText示例')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: StyledTextDemo(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        // 全局默认文本样式
        style: const TextStyle(
          fontSize: 16,
          color: Colors.black87,
          height: 1.5,
        ),
        children: [
          const TextSpan(text: '您的账户余额为 '),
          // 高亮金额样式
          const TextSpan(
            text: '¥128.50',
            style: TextStyle(
              color: Colors.redAccent,
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          const TextSpan(text: '\n'),
          const TextSpan(text: '今日已完成 '),
          // 自定义标签样式
          WidgetSpan(
            alignment: PlaceholderAlignment.middle,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
              margin: const EdgeInsets.symmetric(horizontal: 4),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(4),
              ),
              child: const Text(
                '15单',
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
          ),
          const TextSpan(text: ' 订单，还差 '),
          const TextSpan(
            text: '5单',
            style: TextStyle(
              color: Colors.orange,
              fontWeight: FontWeight.w600,
            ),
          ),
          const TextSpan(text: ' 即可达成今日满额奖励标准。\n'),
          // 可点击文本
          TextSpan(
            text: '查看奖励规则',
            style: const TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('打开奖励规则页面')),
                );
              },
          )
        ],
      ),
    );
  }
}

• 所有文本样式都可以通过TextStyle单独配置给每个TextSpan，包括颜色、字号、字重、装饰线等
• 插入图标、自定义标签这类非文本内容时，使用WidgetSpan包裹即可，可通过alignment参数调整和文本的对齐方式
• 需要给某段文本加点击事件时，给对应TextSpan的recognizer属性绑定手势识别器即可

内容的提问来源于stack exchange，提问作者mayuresh surve