Flutter富文本渲染插件vivid_text的使用

Flutter富文本渲染插件vivid_text的使用

vivid_text 是一个强大的解决方案，用于基于文本生成“混合排版（文本与小部件的混合）”。

示例

// 定义标签列表
final List<VividTag> tags = [
    // 用户标签
    VividWidgetTag(
    name: 'user',
    builder: ((child, attributes) {
        final name = attributes['name'];
        return TextButton(
            onPressed: () {
            final user = getUserApi(int.parse(attributes['userid'] ?? '0'));
            Navigator.push(context, MaterialPageRoute(builder: (c) => UserPage(user)));
            },
            child: Text('$name', style: const TextStyle(fontSize: 18)));
    }),
    ),
    // 星星图标标签
    VividWidgetTag(
    name: 'star',
    builder: ((child, attributes) {
        return Icon(Icons.star, color: Colors.yellow[700]);
    }),
    ),
    // 时间标签
    VividTextTag(
    name: 'hoursToNow',
    builder: ((child, attributes) {
        final time = DateTime.fromMillisecondsSinceEpoch(int.parse(attributes['time']!));
        return TextSpan(text: '${time.hour}');
    }),
    ),
];

// 日志列表
final logs = [
    '<user userid="1" name="keysking"></user> 创建了这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
    '<user userid="2" name="Jobs"></user> <star></star> 这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
    '<user userid="1" name="keysking"></user> 创建了这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
];

// 使用VividText渲染日志
VividText(logs[index], tags: tags, style: const TextStyle(fontSize: 18))

完整示例代码

import 'package:flutter/material.dart';
import 'package:vivid_text/vivid_text.dart'; // 导入vivid_text包

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  int index = 0;

  final List<VividTag> tags = [
    // 用户标签
    VividWidgetTag(
      name: 'user',
      builder: ((child, attributes) {
          final name = attributes['name'];
          return TextButton(
              onPressed: () {
              final user = getUserApi(int.parse(attributes['userid'] ?? '0'));
              Navigator.push(context, MaterialPageRoute(builder: (c) => UserPage(user)));
              },
              child: Text('$name', style: const TextStyle(fontSize: 18)));
      }),
    ),
    // 星星图标标签
    VividWidgetTag(
      name: 'star',
      builder: ((child, attributes) {
          return Icon(Icons.star, color: Colors.yellow[700]);
      }),
    ),
    // 时间标签
    VividTextTag(
      name: 'hoursToNow',
      builder: ((child, attributes) {
          final time = DateTime.fromMillisecondsSinceEpoch(int.parse(attributes['time']!));
          return TextSpan(text: '${time.hour}');
      }),
    ),
  ];

  final logs = [
    '<user userid="1" name="keysking"></user> 创建了这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
    '<user userid="2" name="Jobs"></user> <star></star> 这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
    '<user userid="1" name="keysking"></user> 创建了这个库 <hoursToNow time="1656589103"></hoursToNow> 小时之前',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('VividText Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  index = (index + 1) % logs.length;
                });
              },
              child: Text('切换日志'),
            ),
            SizedBox(height: 20),
            // 使用VividText渲染日志
            VividText(logs[index], tags: tags, style: const TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}