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

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

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

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

如果是单行文本，我可以使用Row+Expaned，但带有图标混合的多行文本只能使用RichText+WidgetSpan

我也考虑过使用TextPainter来计算边界值，但这并不是一个最优的解决方案

---

如何实现这一点？

一个

RichText

小部件可以与

text span

（用于初始文本） +

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)),
    );
  }
}

代码：

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)),
    );
  }
}

---

我有一个解决方案，但不是一个好的例子。你可以用stack小部件包装它，然后图标可能会把它放在右下角。我希望图标总是在右下角..是的，谢谢你的回答，我已经想到了；但关键是你如何确定当前文本是否超过两行。拖尾图标并不总是在那里抱歉我犯了一个错误，省略号不总是存在，不是iconthank的答案，我想解决的是，超过两行将显示省略号，而结束图标仍将显示