提交工单
咨询集成、功能及报价等问题
To customize the message list item, you can set up the ZegoUIKitPrebuiltLiveAudioRoomConfig.inRoomMessage.itemBuilder
. The itemBuilter
method returns a Widget
, and when the list is drawn, it calls back the itemBuilder
function you set to get the Widget
for rendering.
You can get and read the message
from the itemBuilder
parameter. The message is of type ZegoInRoomMessage
and has the following structure:
class ZegoInRoomMessage {
int messageID;
ZegoUIKitUser user; // message sender.
String message; // message content.
int timestamp; // The timestamp at which the message was sent
var state =
ValueNotifier<ZegoInRoomMessageState>(ZegoInRoomMessageState.success); // message sending state.
}
Besides, you can decide the effect when the message sent failed or successfully, and also set up the logic for sending the message again when the message failed to be sent.
Here the reference code shows how to customize a message view:
class LivePage extends StatelessWidget {
const LivePage({Key? key, required this.roomID, this.isHost = false})
: super(key: key);
final String roomID;
final bool isHost;
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveAudioRoom(
appID: YourSecret.appID,
appSign: YourSecret.appSign,
userID: userID,
userName: 'user_$userID',
roomID: roomID,
// Modify your custom configurations here.
config: isHost
? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
: ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
..inRoomMessage = ZegoLiveAudioRoomInRoomMessageConfig(
itemBuilder: (
BuildContext context,
ZegoInRoomMessage message,
Map<String, dynamic> extraInfo,
) {
/// how to use itemBuilder to custom message view
return Text('${message.user.name} : ${message.message}');
},
),
),
);
}
}