间距气泡聊天 Flutter

Spacing bubble chat Flutter

提问人:melaineberth 提问时间:11/3/2023 最后编辑:melaineberth 更新时间:11/3/2023 访问量:49

问:

我正在处理一个聊天页面,我想根据消息的类型(接收者或发送者)在消息之间分配不同的间距,我设法更接近我的想法,但代码一点也不干净,你有什么想法吗?

苹果

矿山

我的消息列表

Column(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: () {
                context.read<ChatController>().focusNode.unfocus();
              },
              child: Align(
                alignment: Alignment.topCenter,
                child: Selector<ChatController, List<ChatMessage>>(
                  selector: (context, controller) =>
                      controller.chatList.reversed.toList(),
                  builder: (context, chatList, child) {
                    return ListView.builder(
                      shrinkWrap: true,
                      reverse: true,
                      padding: const EdgeInsets.only(
                          right: 15,
                          left: 15,
                          bottom: 15,
                          top: kToolbarHeight * 2.5),
                      physics: const BouncingScrollPhysics(),
                      controller:
                          context.read<ChatController>().scrollController,
                      itemCount: chatList.length,
                      itemBuilder: (context, index) {
                        // Spacing
                        final previousMessage =
                            index > 0 ? chatList[index - 1] : null;
                        final currentMessage = chatList[index];
                        final nextMessage = index < chatList.length - 1
                            ? chatList[index + 1]
                            : null;

                        EdgeInsets padding =
                            const EdgeInsets.only(top: 0, bottom: 0);

                        if (currentMessage.messageType ==
                            ChatMessageType.receiver) {
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.receiver &&
                              nextMessage != null &&
                              nextMessage.messageType ==
                                  ChatMessageType.receiver) {
                            padding = const EdgeInsets.only(top: 5, bottom: 0);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.receiver &&
                              nextMessage != null &&
                              nextMessage.messageType == ChatMessageType.sent) {
                            padding = const EdgeInsets.only(top: 10, bottom: 5);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.sent &&
                              nextMessage != null &&
                              nextMessage.messageType ==
                                  ChatMessageType.receiver) {
                            padding = const EdgeInsets.only(top: 0, bottom: 10);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.sent &&
                              nextMessage != null &&
                              nextMessage.messageType == ChatMessageType.sent) {
                            padding =
                                const EdgeInsets.only(top: 10, bottom: 10);
                          }
                        } else if (currentMessage.messageType ==
                            ChatMessageType.sent) {
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.sent &&
                              nextMessage != null &&
                              nextMessage.messageType == ChatMessageType.sent) {
                            padding = const EdgeInsets.only(top: 0, bottom: 0);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.sent &&
                              nextMessage != null &&
                              nextMessage.messageType ==
                                  ChatMessageType.receiver) {
                            padding = const EdgeInsets.only(top: 10, bottom: 5);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.receiver &&
                              nextMessage != null &&
                              nextMessage.messageType == ChatMessageType.sent) {
                            padding = const EdgeInsets.only(top: 0, bottom: 10);
                          }
                          if (previousMessage != null &&
                              previousMessage.messageType ==
                                  ChatMessageType.receiver &&
                              nextMessage != null &&
                              nextMessage.messageType ==
                                  ChatMessageType.receiver) {
                            padding =
                                const EdgeInsets.only(top: 10, bottom: 10);
                          }
                        }

                        return Padding(
                          padding: padding,
                          child: ChatBubble(
                            chat: currentMessage,
                            chatUsers: widget.chatUsers,
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
          ),
          Divider(
            thickness: .5,
            color: Theme.of(context).cupertinoOverrideTheme?.primaryColor,
            height: 1,
          ),
          const _BottomInputField(),
        ],
      ),

我的消息模型

import 'package:lumina_project/models/enum/chat_message_type.dart';

class ChatMessage {
  final DateTime time;
  final String messageContent;
  final ChatMessageType messageType;
  final String? path;
  final bool select;
  final bool isLiked;

  ChatMessage(
      {required this.time,
      required this.messageContent,
      required this.messageType,
      required this.select,
      required this.isLiked,
      this.path});

  factory ChatMessage.sent({required message}) => ChatMessage(
        messageContent: message,
        messageType: ChatMessageType.sent,
        time: DateTime.now(),
        select: false,
        isLiked: false,
      );

  static List<ChatMessage> generate() {
    return [
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 15)),
        messageContent: "Hello!",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 14)),
        messageContent: "Nice to meet you!",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 13)),
        messageContent: "The weather is nice today.",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 12)),
        messageContent: "Yes, it's a great day to go out.",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 11)),
        messageContent: "Have a nice day!",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 10)),
        messageContent: "What are your plans for the weekend?",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 9)),
        messageContent: "I'm planning to go to the beach.",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 8)),
        messageContent: "That sounds fun!",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 7)),
        messageContent: "Do you want to come with me?",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 6)),
        messageContent: "Sure, I'd love to!",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 5)),
        messageContent: "What time should we meet?",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 4)),
        messageContent: "Let's meet at 10am.",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 3)),
        messageContent: "Sounds good to me!",
        messageType: ChatMessageType.receiver,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        time: DateTime.now().subtract(const Duration(minutes: 2)),
        messageContent: "See you then!",
        messageType: ChatMessageType.sent,
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "Bye!",
        messageType: ChatMessageType.receiver,
        time: DateTime.now().subtract(const Duration(minutes: 1)),
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "How was your weekend?",
        messageType: ChatMessageType.receiver,
        time: DateTime.now().subtract(const Duration(minutes: 1)),
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "It was great! The beach was awesome.",
        messageType: ChatMessageType.sent,
        time: DateTime.now(),
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "I'm glad to hear that!",
        messageType: ChatMessageType.receiver,
        time: DateTime.now(),
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "We should do that again sometime.",
        messageType: ChatMessageType.sent,
        time: DateTime.now(),
        select: false,
        isLiked: false,
      ),
      ChatMessage(
        messageContent: "Definitely!",
        messageType: ChatMessageType.receiver,
        time: DateTime.now(),
        select: false,
        isLiked: false,
      ),

    ];
  }
}

感谢那些花时间帮助我的人

安卓 iOS iPhone Flutter 飞镖

评论

0赞 iStornZ 11/3/2023
你能分享你的代码吗,请:)
0赞 melaineberth 11/3/2023
对不起,没关系:)
0赞 iStornZ 11/3/2023
首先,我认为您可以将所有出现的“previousMessage != null && previousMessage.messageType == ChatMessageType.XX”更改为“previousMessage?”。messageType == ChatMessageType.XX”

答: 暂无答案