aardio 文档

ChatList 气泡聊天列表

AntdUI.Chat.ChatList 用于显示聊天气泡消息,支持左右消息、头像/昵称、时间、加载状态、图片消息、滚动到底部等能力。文本消息使用 TextChatItem,图片消息使用 ImageChatItem

当前 DLL 已确认存在:AntdUI.Chat.ChatListTextChatItemImageChatItemIChatItemChatItemCollection

最小示例

import win.ui;
import dotNet.AntdUI;
import System.Drawing;

var winform = win.form(text="ChatList 示例";right=640;bottom=460);
winform.add(host={cls="custom";left=0;top=0;right=640;bottom=460;z=1});

var chatList = AntdUI.Chat.ChatList(winform.host);
chatList.Dock = System.Windows.Forms.DockStyle.Fill;
chatList.ItemGap = 10;
chatList.BubbleGap = 8;
chatList.ShowTimeFocused = true;

var left = AntdUI.Chat.TextChatItem("你好,我是张三");
left.SetName("张三").SetTime("09:30");
chatList.Items.Add(left);

var right = AntdUI.Chat.TextChatItem("你好,我是当前用户");
right.SetName("我").SetMe(true).SetTime("09:31");
chatList.AddToBottom(right,true);

var loading = AntdUI.Chat.TextChatItem("正在生成回复...");
loading.SetName("机器人").SetLoading(true);
chatList.AddToBottom(loading,true);

winform.show();
win.loopMessage();

文本消息 TextChatItem

常用构造与链式方法:

var msg = AntdUI.Chat.TextChatItem("消息文本");
msg.SetName("张三");
msg.SetTime("刚刚");
msg.SetMe(true);      // 右侧/当前用户消息
msg.SetLoading(false);
msg.SetID("m1001");
msg.SetTag({type="text"});

常用属性:

图片消息 ImageChatItem

var imgItem = AntdUI.Chat.ImageChatItem(160,100);
imgItem.SetName("图片消息");
imgItem.SetMe(true);
imgItem.SetLoading(false);
chatList.Items.Add(imgItem);

常用属性/方法:

ChatList 常用属性与方法

常用事件

chatList.ItemClick = function(sender,e){
    var it = e.Item;
    if(it) winform.text = "点击消息:" + (it.Text : "");
}

chatList.ItemImageClick = function(sender,e){
    // e.ClickImage 为被点击图片;可在这里调用 Preview 或自定义图片查看器
}

模拟流式回复

var reply = AntdUI.Chat.TextChatItem("");
reply.SetName("机器人").SetLoading(true);
chatList.AddToBottom(reply,true);

// 实际项目可在异步回调中逐步更新 Text
reply.Loading = false;
reply.Text = "这是最终回复内容";
if(chatList.IsBottom) chatList.ToBottom();

注意事项

Markdown 格式