如何在Flutter中结合实现flutter_parsed_text与ReadMore组件

1. 添加依赖 #

在项目的pubspec.yaml中添加两个组件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_parsed_text: ^最新版本号
  readmore: ^最新版本号

执行flutter pub get完成依赖安装。

2. 核心实现逻辑 #

ReadMore组件支持传入任意Widget作为child，因此可以直接将ParsedText作为ReadMore的子组件，同时分别配置两个组件的功能：

• 用ParsedText处理文本中的特殊内容（如邮箱、网址、@提及等），设置点击交互和样式。
• 用ReadMore实现文本的展开/收起功能，控制显示行数、展开收起按钮样式等。

3. 完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_parsed_text/flutter_parsed_text.dart';
import 'package:readmore/readmore.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Combined Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CombinedTextDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const demoText = '这是一段包含链接、邮箱test@example.com和@用户名的长文本，用来测试组合功能。这里需要足够多的内容来触发ReadMore的收起效果，比如再添加一些描述：Flutter是一个跨平台的UI框架，能快速构建美观的应用。flutter_parsed_text可以解析文本中的特殊格式，ReadMore则能让长文本折叠显示，两者结合就能实现既支持文本解析又支持展开收起的功能。';

    return Scaffold(
      appBar: AppBar(title: const Text('组合组件Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ReadMoreText(
          // 直接传入ParsedText作为child，替代ReadMore默认的文本参数
          child: ParsedText(
            text: demoText,
            style: const TextStyle(fontSize: 16, color: Colors.black87),
            parse: [
              // 解析网址
              MatchText(
                type: ParsedType.url,
                style: const TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
                onTap: (url) => print('点击了网址：$url'),
              ),
              // 解析邮箱
              MatchText(
                type: ParsedType.email,
                style: const TextStyle(color: Colors.green, decoration: TextDecoration.underline),
                onTap: (email) => print('点击了邮箱：$email'),
              ),
              // 解析@提及内容
              MatchText(
                pattern: r'@(\w+)',
                style: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
                onTap: (mention) => print('提及了用户：$mention'),
              ),
            ],
          ),
          // 配置ReadMore的折叠/展开参数
          trimLines: 2,
          trimMode: TrimMode.Line,
          trimCollapsedText: ' 展开更多',
          trimExpandedText: ' 收起',
          moreStyle: const TextStyle(fontSize: 14, color: Colors.blue),
          lessStyle: const TextStyle(fontSize: 14, color: Colors.blue),
        ),
      ),
    );
  }
}

4. 关键注意事项 #

• 不要给ReadMoreText传递data参数，否则会覆盖传入的child组件。
• 可根据需求扩展ParsedText的parse规则，支持自定义正则匹配任意文本格式。
• 通过ReadMore的trimLines、collapseOnTextTap等参数，可自定义折叠展开的触发方式和样式。

内容的提问来源于stack exchange，提问作者Yogesh Dubey