我目前正在使用ListTile来模拟在群聊中发送和接收的消息。这工作得很好，但现在我需要添加包含第三种消息类型的功能，我不知道是否可以使用ListTile这样做，或者是否需要使用Rows和Containers从头开始重做。
现在，该条件只是检查uid == currentUID，以确定是在左侧还是右侧显示消息。我需要更改此设置以检查消息的类型，如果是1类型，则在中间显示聊天消息。否则，对uid == currentUID执行常规检查，以确定它应该在左侧还是右侧。
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: ListView.builder(
itemCount: chats.length,
itemBuilder: (context, index) {
final isSelected = index == selectedIndex;
final msg = ModelChatData.fromJson(chats[index]);
final text = msg.text;
final timestamp = msg.timestamp;
final type = msg.type;
var uid = '';
var username = '';
if (type == 0) { // regular message
uid = msg.uid!;
username = msg.username!;
}
if (type == 1) {
//do something that will allow the code below to show the chat message in the middle of the screen
}
return FractionallySizedBox(
widthFactor: 1, // set width of listtile
child: ListTile(
onTap: () {
setState(() {
selectedIndex = isSelected ? null : index;
});
},
leading: uid == currentUID
? const SizedBox.shrink()
: const CircleAvatar(child: FlutterLogo(),),
title: Column(
crossAxisAlignment: uid == currentUID
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text(
username,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
],
),
trailing: uid == currentUID
? const CircleAvatar(child: FlutterLogo(),)
: const SizedBox.shrink(),
subtitle: Column(
crossAxisAlignment: uid == currentUID
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text(text),
Visibility(
visible:
isSelected, // used for show/hide date when message is clicked on
child: Text(
DateTime.now().toString(),
),
),
],
),
),
);
},
),
),
],
);
}
1条答案
按热度按时间ca1c2owp1#
你需要添加条件来实现这一点.....
您的
ListView.builder返回上面的小部件。