Flutter RichText 实现自定义文本溢出，告别枯燥的省略号

Android

2024-02-16 13:10:31

富文本溢出

在 Flutter 中，当文本超出其可用空间时，它将被截断并显示省略号 (...)。这对于短文本来说是合适的，但对于长文本来说，这可能会让读者感到沮丧，因为他们必须点击文本才能阅读全文。

自定义文本溢出

为了提供更好的用户体验，您可以使用 RichText 控件来自定义文本溢出效果。这允许您在文本溢出时显示自定义文本或图标，并允许用户点击该文本或图标以阅读全文。

实现步骤

要实现自定义文本溢出，您可以按照以下步骤操作：

在您的代码中导入 RichText 控件：

import 'package:flutter/material.dart';

创建一个 RichText 控件，并设置其文本溢出属性：

RichText(
  text: TextSpan(
    text: '这是一个很长的文本，它将被截断并显示省略号。',
    style: TextStyle(
      fontSize: 16,
      color: Colors.black,
    ),
  ),
  overflow: TextOverflow.ellipsis,
)

创建一个 GestureDetector 控件，并将其包裹在 RichText 控件周围：

GestureDetector(
  onTap: () {
    // 在这里处理点击事件，例如跳转到全文页面
  },
  child: RichText(
    text: TextSpan(
      text: '这是一个很长的文本，它将被截断并显示省略号。',
      style: TextStyle(
        fontSize: 16,
        color: Colors.black,
      ),
    ),
    overflow: TextOverflow.ellipsis,
  ),
)

在 GestureDetector 控件中，添加一个 TextSpan 控件，并设置其文本和样式：

GestureDetector(
  onTap: () {
    // 在这里处理点击事件，例如跳转到全文页面
  },
  child: RichText(
    text: TextSpan(
      text: '这是一个很长的文本，它将被截断并显示省略号。',
      style: TextStyle(
        fontSize: 16,
        color: Colors.black,
      ),
      children: [
        TextSpan(
          text: ' [全文]',
          style: TextStyle(
            fontSize: 16,
            color: Colors.blue,
          ),
        ),
      ],
    ),
    overflow: TextOverflow.ellipsis,
  ),
)