基于包裹文本的子窗口小部件的复杂对齐，例如在Telegram聊天Messenger中

Question

我的目标是复制用于其聊天消息气泡的复杂布局Telegram（和其他一些聊天应用程序）。气泡并不复杂，但是气泡中的文本与日期对齐得很好，这被证明是非常荒谬的：

类似post has been made and answered here，但严格来说，它不能正确处理换行符（下面的情况＃1和＃2），因为填充右键保持不变，浪费了大量屏幕空间，而且看起来很糟。 （如果不清楚，请参见此处：2。）>

我编译了我认为是3个“用例”以重现上图中的这种布局：

Case＃1：

到目前为止是最复杂的，它似乎是用于日期小部件的小容器，仅占用最小的空间，可能是mainAxisSize设置为min的行。复杂的部分在于如何使文本上下左右流动，同时自然包裹以避免任何重叠。

Case＃2：

如果上面的＃1重叠，由于文本行包含几乎完美的字符（以便不自然地换行），它将过渡到情况＃2中看到的布局下方似乎是具有两个嵌套行的列。

案例＃3：

到目前为止，这是最简单的隔离实现，可以通过多种方式完成，最简单的方法是单行包含两个文本小部件。我相当确定某个解决方案是否可以完成上述＃1＆＃2，这个解决方案应该是免费的。

我尝试过的事情：

将两者堆叠在一起，将日期包装在Positioned和类似bottom: 0, right: 15的文件中。如果您添加的padding-right至少为25，则基本上只能实现案例1。

我还尝试过RichText，到目前为止，RichText一直是最有前途的，它可以处理所有情况，但与电报正在执行的操作相比，效果却差强人意。主要的缺点是我仍然必须使用某种堆栈来放置“已发送并已看到”的图标复选标记，因为RickText跨度中不能包含图标...所以我仍然需要一些向右+底部填充，以免重叠。这是代码，以及下面的图片：

RichText(
  text: TextSpan(
    text: _message.textContent,
    style: DefaultTextStyle.of(context).style.merge(TextStyle(fontSize: 16)),
    children: <TextSpan>[
      TextSpan(text: ' ' + DateFormat('H:mm a').format(_message.createdDate.toLocal()).toString(),
        style: Theme.of(context).textTheme.caption.merge(
          TextStyle(
            fontSize: 10,
          )
        ),
      ),
    ],
  ),
),

理想情况下，日期将是一个单独的小部件，并且两个日期将与spaceBetween灵活对齐，因此日期始终如右图所示，始终位于右下角。哦，我正在使用bubble: ^1.1.9+1小部件显示实际的聊天气泡。

我的目标是复制用于其聊天消息气泡的复杂布局Telegram（和其他一些聊天应用程序）。气泡并不复杂，但是气泡中的文本与...

Answer 1

找到了解决方案，并且对它的简单性感到非常愚蠢，但不能抱怨它是完美的：