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

问题描述 投票:0回答:7

我的聊天气泡如下所示:

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

这是我的代码:

   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
添加到列会将所有小于时间戳文本的文本对齐到右侧。

flutter dart flutter-layout
7个回答
1
投票

Align
小部件包裹你的时间戳,如下所示:

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

1
投票

您可以通过在格式化的

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

0
投票

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


0
投票

crossAxisAlignment: CrossAxisAlignment.end,
 上使用 
Column

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

0
投票

另一个解决方案是

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(),
                      ],
                    )

0
投票

使用

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
用例文档

注:

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


0
投票

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

这是一个例子:

© www.soinside.com 2019 - 2024. All rights reserved.