如何在Flutter上的聊天气泡中实现时间文本自动换行行为 [英] How to implement time text wrapping behaviour in chat bubble on Flutter

问题描述

许多本地移动聊天Messenger，例如电报，whatsapp等，都实现了这种包装行为:在没有足够的文本空间时，将时间标签包装到新的一行.

A lot of native mobile chat messengers, like telegram, whatsapp, etc, implement this wrapping behaviour: wrapping time label to a new line when there is no enough room for text.

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

Simple chat bubble consist of two parts: Text and time label. In simple case, they are almost positioned on the same baseline. Even when the text is multiline (baseline with last line). But in some cases, when there is no free space and the texts are trying to intersect, an indent is added at the bottom of bubble.

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

It will be simple to understand, if I show it by pictures and videos:

还有2个视频:

多行 https://youtu.be/eigLIHWaub8

单行 https://youtu.be/9GMDFYwMqdU

如何在Flutter上实现它?

How to implement it on Flutter?

推荐答案

您可以在第一层上使用带有假占位符的Stack来获取时间(或其他信息)，在第二层上使用真实位置的文本.

You can use Stack with fake placeholder for time (or another info) on first layer and real positioned text on the second layer.

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

结果可能类似于: 结果屏幕截图

这篇关于如何在Flutter上的聊天气泡中实现时间文本自动换行行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！