Flutter 如何在flatter上的聊天泡泡中实现时间文本包装行为

许多本地移动聊天信使，如telegram、whatsapp等，都实现了这种包装行为：当没有足够的文本空间时，将时间标签包装到新行

简单的聊天泡泡由两部分组成：文本和时间标签。在简单的情况下，它们几乎位于同一基线上。即使文本为多行（最后一行的基线）。但在某些情况下，当没有可用空间且文本试图相交时，会在气泡底部添加缩进

如果我通过图片和视频展示，它将很容易理解：

和2个视频：

多行

单线

---

如何在颤振上实现它

您可以使用

Wrap

小部件执行非常类似的操作，但不完全相同：

Card(
            color: Colors.greenAccent,
            child: Wrap(
              alignment: WrapAlignment.end,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                      "Text message in multi-lines and it looks similar to what's in the picture "),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("10:0 PM"),
                ),
              ],
            ),
          ), 

卡(
颜色：Colors.greenAccent，
孩子：包裹(
对齐：wrappalignment.end，
儿童：[
填充物(
填充：常数边集全部（8.0），
子：文本(
“多行文字信息，看起来与图片中的内容相似”），
),
填充物(
填充：常数边集全部（8.0），
儿童：文本（“晚上10:0”），
),
],
),
), 

---

您可以在第一层使用带有假占位符（或其他信息）的堆栈，在第二层使用真实定位文本

    class CustomCard extends StatelessWidget {


     final String msg;
      final String additionalInfo;

      CustomCard({
        @required this.msg,
        this.additionalInfo = ""
      });

      @override
      Widget build(BuildContext context) {
        return Card(
          child: Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: RichText(
                  text: TextSpan(
                    children: <TextSpan>[

                  //real message
                  TextSpan(
                    text: msg + "    ",
                    style: Theme.of(context).textTheme.subtitle,
                  ),

                  //fake additionalInfo as placeholder
                  TextSpan(
                      text: additionalInfo,
                      style: TextStyle(
                          color: Color.fromRGBO(255, 255, 255, 1)
                      )
                  ),
                ],
              ),
            ),
          ),

          //real additionalInfo
          Positioned(
            child: Text(
              additionalInfo,
              style: TextStyle(
                fontSize: 12.0,
              ),
            ),
            right: 8.0,
            bottom: 4.0,
          )
        ],
      ),
    );
 }

class CustomCard扩展了无状态小部件{
最终字符串msg；
最终字符串附加信息；
海关卡({
@需要这个.msg，
this.additionalInfo=“”
});
@凌驾
小部件构建（构建上下文）{
回程卡(
子：堆栈(
儿童：[
填充物(
填充：常数边集全部（8.0），
孩子：RichText(
text:TextSpan(
儿童：[
//真正的信息
TextSpan(
文本：msg+“”，
风格：Theme.of（context）.textTheme.subtitle，
),
//假附加信息作为占位符
TextSpan(
文本：附加信息，
样式：TextStyle(
颜色：color.fromRGBO（255，255，255，1）
)
),
],
),
),
),
//真实附加信息
定位(
子：文本(
其他信息，
样式：TextStyle(
字体大小：12.0，
),
),
右图：8.0，
底部：4.0，
)
],
),
);
}

结果可能如下所示：

---

这很相似-是的，但不一样。问题是如何做同样的事情。这个问题更复杂，我知道小部件无法解决