AntdUI教程#1ChatList交互（vb.net）

本教程主要是针对ChatList的扩展功能：比如高亮选择消息、删除高亮消息等Demo没有的功能，并且最新的2.3.1作者更新了ScrollBar的bug这就香了

ChatList支持文字、图片、还有流生成模式，本教程主要为ChatList的交互扩展

全局变量声明：

Dim ID As Long
Dim rects As New List(Of Rectangle)
Dim ids As New List(Of Long)

1、我方、对方发送消息（部分摘自Demo）

对方：

Dim tci As New AntdUI.Chat.TextChatItem("你好！最近怎么样？", Image.FromFile("D:\AE素材\yu.jpg"), "朋友")
tci.SetID(ID)
tci.SetTime(Date.Now)
Chat.AddToBottom(tci)
ID += 1

我方：

Dim tci As New AntdUI.Chat.TextChatItem("还不错，项目进展顺利 🚀", Image.FromFile("D:\AE素材\yu.jpg"), "我")
tci.SetMe(True)
tci.SetID(ID)
tci.SetTime(Date.Now)
Chat.AddToBottom(tci)
ID += 1

注意到我方有SetMe的一个方法，并且有注意到每一个对话都设置了一个ID ，由于ID上限不详细，因此ID的类型为Long长整型

2、模拟加载历史信息，类似微信或者QQ的加载历史消息

Chat List与普通List相似，可以在指定Index插入值或一段值

 Dim OldChatList As New List(Of TextChatItem)
 For i = 0 To 9
     Dim tci As New TextChatItem("这是补充的文字", Image.FromFile("D:\AE素材\yu.jpg"), "我")
     tci.SetID(ID)
     OldChatList.Add(tci)
     ID += 1
 Next
 Chat.Items.InsertRange(0, OldChatList.ToArray)

3、高亮选择

由于Chat List并没有提供SelectedItem方法，但是在ChatList内部有一个事件为Chat.ItemClick，可以精准定位点击的对象，而且Chat List没有给出ContextMenuStrip的空位，那么就直接写在item点击事件中

Private Sub Chat_ItemClick(sender As Object, e As ChatItemEventArgs) Handles Chat.ItemClick

    Select Case e.Button
        Case MouseButtons.Left
            Dim tci As TextChatItem = e.Item
            Dim rect As Rectangle = tci.rect

            If rects.Contains(rect) Or ids.Contains(tci.ID) Then
                rects.Remove(rect)
                ids.Remove(tci.ID)
            Else
                rects.Add(rect)
                ids.Add(tci.ID)
            End If
        Case MouseButtons.Right
            ContextMenu.Show(Chat, e.Location)
    End Select

End Sub

为了高亮显示和兼容滚动条的滑动我们还需要获取滚动条的ValueY

我们在ChatList的Paint事件里面重绘：

Private Sub Chat_Paint(sender As Object, e As PaintEventArgs) Handles Chat.Paint
    Dim g = e.Graphics
    For Each rect In rects
        rect.Location = New Point(rect.Location.X, rect.Location.Y - Chat.ScrollBar.ValueY)
        g.FillRectangle(New SolidBrush(Color.FromArgb(128, 255, 0, 0)), rect)
        g.DrawRectangle(New Pen(Color.FromArgb(255, 0, 0)), rect)
    Next
End Sub

其中：

New Point(rect.Location.X, rect.Location.Y - Chat.ScrollBar.ValueY)

在滚动滚动条时可以跟着项目位置一起绘制，而不至于导致绘制错位

4、删除高亮对话

Private Sub Button6_Click(sender As Object, e As EventArgs) Handles Button6.Click
    Chat.SuspendLayout()

    For Each itm As TextChatItem In Chat.Items.Cast(Of TextChatItem).ToList()
        If ids.Contains(itm.ID) Then
            Chat.Items.Remove(itm)
        End If
    Next

    Chat.ResumeLayout()

    rects.Clear()
    ids.Clear()
End Sub

这里解释一下为什么要使用，因为一次性删除多个会导致一直处于重新绘制状态导致资源消耗卡顿

Chat.SuspendLayout()
'''

'''
Chat.ResumeLayout()

这里解释一下为什么不直接操作源列表，因为操作了源列表会导致移除数据错乱，即Index错位

故使用一个影子列表，这样在遍历的过程中不会影响到源数据的区域（这样解释不知道大家懂不懂）：

Chat.Items.Cast(Of TextChatItem).ToList()

在遍历list时直接按 index 删除元素，会导致 后面的元素 index 变化，所以删除结果不对。

5、插入图片

ChatList采用的是Base64图片的方法

Private Sub Button5_Click(sender As Object, e As EventArgs) Handles Button5.Click
    Dim tci As New AntdUI.Chat.TextChatItem("这是图片" & GetImageString("C:\Users\Administrator\Pictures\屏幕截图 2026-03-05 224508.png"), Image.FromFile("D:\AE素材\yu.jpg"), "我")
    tci.SetMe(True)
    tci.SetID(ID)
    tci.SetTime(Date.Now)
    ID += 1
    Chat.AddToBottom(tci)
End Sub

Function GetImageString(path As String) As String
    Return "data:image/png;base64," & Convert.ToBase64String(File.ReadAllBytes(path))
End Function

交互效果图：