Flutter如何在长文本末尾添加可点击图标且保留Text组件的textDirection、maxLines参数

数据老陈

2026-10-7

实现方案

核心思路

使用Text.rich（属于Text组件的子类，完全支持Text的所有原生参数）组合文本与图标，既满足必须使用Text组件的约束，也能正常配置textDirection、maxLines、overflow等属性，还可以实现图标和文本的紧邻排列、自适应换行效果。

具体实现步骤

把长文本内容封装为普通TextSpan，放在富文本列表的前半部分
用WidgetSpan包裹可点击图标：图标外层套GestureDetector/InkWell实现点击逻辑，可通过WidgetSpan的alignment参数调整图标和文字的垂直对齐效果，比如设置为PlaceholderAlignment.middle实现垂直居中对齐
所有TextSpan和WidgetSpan都放到Text.rich的text参数中，正常配置Text的其他属性即可

示例代码

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class TextWithEndIcon extends StatelessWidget {
  final String content;
  final VoidCallback onIconTap;
  const TextWithEndIcon({super.key, required this.content, required this.onIconTap});

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(text: content),
          // 末尾紧邻的可点击图标
          WidgetSpan(
            alignment: ui.PlaceholderAlignment.middle,
            child: GestureDetector(
              onTap: onIconTap,
              child: const Icon(Icons.info_outline, size: 16, color: Colors.blue),
            ),
          )
        ]
      ),
      // Text原生参数都可以正常配置
      textDirection: TextDirection.ltr,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(fontSize: 14, color: Colors.black87),
    );
  }
}