Flutter 在气泡聊天消息上对齐时间戳文本

Question

我的聊天气泡如下所示：

我希望它的时间戳粘在右侧，如下所示：

这是我的代码：

   return Align(
      alignment: alignment,
      child: Bubble(
        margin: BubbleEdges.only(
          top: 10,
          left: leftMargin,
          right: rightMargin,
        ),
        color: backgroundColor,
        nip: bubbleNip,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            content,
            const SizedBox(height: 5),
            Text(timeFormat01(timestamp)),
          ],
        ),
      ),
    );

我该怎么做？

什么不起作用？

使用“行”

mainAxisAlignment: MainAxisAlignment.end

或“对齐”

alignment: Alignment.centerRight

可以将所有气泡拉伸到最大宽度。

将

crossAxisAlignment: CrossAxisAlignment.end

添加到列会将所有小于时间戳文本的文本对齐到右侧。

Answer 1

用

Align

小部件包裹你的时间戳，如下所示：

IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              content,
              SizedBox(height: 5),
              Align(
                alignment: Alignment.centerRight,
                child: Text(timeFormat01(timestamp)),
              ),
            ],
          ),
        )

Answer 2

您可以通过在格式化的

IntrinsicWidth

小部件上组合

Align

和

Bubble

来达到所需的效果。

输出：

来源：

阅读评论以获取解释。

void main() => runApp(
      const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(body: SafeArea(child: BubbleApp())),
      ),
    );

class BubbleApp extends StatelessWidget {
  const BubbleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topRight,
      /// [ConstrainedBox] is used to provide the maximum width
      /// of any one chat bubble.
      child: ConstrainedBox(
        /// In this case, let's use 300.0, but
        /// you can use MediaQuery.of(context) and a percentage.
        constraints: const BoxConstraints(maxWidth: 300.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.end,
          /// Populate [children] however you manage your state.
          children: const [
            BubbleMessage(
              message:
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                  " Aenean eleifend sed purus a tincidunt. Aenean varius erat "
                  " eget justo lacinia.",
            ),
            BubbleMessage(message: "kdo!"),
          ],
        ),
      ),
    );
  }
}

/// This is the wrapper around your [Bubble] class.
class BubbleMessage extends StatelessWidget {
  const BubbleMessage({super.key, required this.message});

  final String message;

  @override
  Widget build(BuildContext context) {
    /// Size the [BubbleMessage] class to the intrinsic width of the child.
    return IntrinsicWidth(
      /// Replace [Card] with your [Bubble] class.
      child: Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,

          /// This ensures that the column height only take up as
          /// much height as needed by the children.
          mainAxisSize: MainAxisSize.min,

          children: [
            /// This is your content.
            Text(message, style: const TextStyle(fontSize: 20.0)),
            const SizedBox(height: 5.0),

            /// This is your formatted time. We align it to the right.
            Align(
              alignment: Alignment.centerRight,
              child: Text(
                DateFormat("hh:mm a").format(DateTime.now()),
                style: const TextStyle(fontSize: 20.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

将时间戳文本包裹在行中，并将主轴对齐设置为结束。

Answer 4

在

crossAxisAlignment: CrossAxisAlignment.end,

 上使用 

Column

 child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
           content,

Answer 5

另一个解决方案是

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: widget.isMyMessage! ? MainAxisAlignment.end : MainAxisAlignment.start,
    children: [ widget.isMyMessage! == true
                       ? Padding(
                         padding: const EdgeInsets.only(right: 4.0),
                          child: Image.asset(
                                 icRead,
                                 height: 16,
                                 width: 16,
                                ),
                         )
                         : Container(),
                        timeData != null ? Text( timeForChatMsg( timeData ),
                                          style: TextStyle(
                                          fontSize: fontSize12,
              color: widget.isMyMessage! ? Colors.white : Colors.black,
            ),
          )
        : Container(); ,
                        widget.isMyMessage! == false
                            ? Padding(
                                padding: const EdgeInsets.only(left: 4.0),
                                child: Image.asset(
                                  icRead,
                                  color: primaryColor,
                                  height: 16,
                                  width: 16,
                                ),
                              )
                            : Container(),
                      ],
                    )

Answer 6

使用

IntrinsicWidth

和

Align

解决了我的问题。

结果如下：

return Align(
      alignment: alignment,
      child: Bubble(
        margin: BubbleEdges.only(
          top: 10,
          left: leftMargin,
          right: rightMargin,
        ),
        color: backgroundColor,
        nip: bubbleNip,
        child: IntrinsicWidth( // <--- here
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              content,
              const SizedBox(height: 5),
              Align(
                alignment: Alignment.centerRight, // <--- here
                child: Text(timeFormat01(timestamp)),
              ),
            ],
          ),
        ),
      ),
    );

了解更多关于

IntrinsicWidth

用例 和 文档。

注：

这个班比较贵。尽可能避免使用它。

Answer 7

嗨，我可能来得有点晚，但我构建了一个包来处理这个问题。使用传统的 flutter 小部件基本上无法实现这一点。这是该包的链接：flutter 包将时间戳放在正确的位置

这是一个例子：