提问人:melaineberth 提问时间:11/3/2023 最后编辑:melaineberth 更新时间:11/3/2023 访问量:49
间距气泡聊天 Flutter
Spacing bubble chat Flutter
问:
我正在处理一个聊天页面,我想根据消息的类型(接收者或发送者)在消息之间分配不同的间距,我设法更接近我的想法,但代码一点也不干净,你有什么想法吗?
我的消息列表
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,
),
];
}
}
感谢那些花时间帮助我的人
答: 暂无答案
评论