时间戳

首页 > 解决方案 > 如何在多行文本中添加尾随图标

flutter - 如何在多行文本中添加尾随图标

问题描述

我需要你的帮助。我需要实现 UI

在此处输入图像描述

我使用 RichText + WidgetSpan，但它不起作用。如果当前文本长度超过两行，我得到这样的效果，这是错误的。我需要图标必须显示：

在此处输入图像描述

我要解决的是超过两行将显示省略号，而尾随图标仍将显示

如果是单行文字，我可以用Row + Expaned，但是多行文字和icon混合，只能用RichText + WidgetSpan

我也考虑过使用 TextPainter 来计算边界值，但感觉不是最佳解决方案

我怎样才能做到这一点？

标签： flutter

解决方案

小RichText部件可以与 TextSpan（对于初始文本）+ WidgetSpan（对于带有背景颜色/图标的文本）来创建这样的输出。

这是使用上述小部件输出的代码片段：

输出：

代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(16),
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(children: [
        TextSpan(
          text:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.... ",
        ),
        WidgetSpan(
          child: Container(
            padding: EdgeInsets.only(bottom: 1, left: 6, right: 6),
            child: Text(
              "Read more",
              style: TextStyle(color: Colors.white),
            ),
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
            ),
          ),
        ),
      ], style: TextStyle(color: Colors.black)),
    );
  }
}

推荐阅读