VB.NET FlowLayoutPanel内UserControl搜索过滤及动态加载实现

硬编码代码含义说明 #

• Dim listItems = New CustomListItem(29) {}：声明长度固定为30的CustomListItem类型数组，VB.NET数组声明的括号内数值为数组最大下标（从0开始计数），因此下标0到29共可存储30个元素，属于提前固定容量的硬编码写法。
• For Each UserList In listUser.Take(30)：调用LINQ的Take方法从用户列表中截取前30条数据遍历，超过30条的JSON数据会被直接忽略，不会生成对应的列表项。

动态适配JSON条目数改造方案 #

原有固定数组+Take(30)的写法无需保留，直接遍历反序列化得到的全量用户数据生成控件即可，无需提前预知数据量。改造后窗体代码如下：

Imports System.IO
Imports Newtonsoft.Json

Public Class Form1
    ' 存储全量用户原始数据
    Private allUsers As List(Of UserList)
    ' 存储所有生成的列表项控件，供过滤逻辑调用
    Private allListItems As List(Of CustomListItem)

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        allUsers = New List(Of UserList)()
        allListItems = New List(Of CustomListItem)()
        ' 读取并反序列化JSON文件
        Dim json = File.ReadAllText("D:\Users.json")
        allUsers = JsonConvert.DeserializeObject(Of List(Of UserList))(json)
        
        FlowLayoutPanel1.Controls.Clear()
        ' 遍历全量用户数据生成列表项，无数量限制
        For Each user In allUsers
            Dim listItem As New CustomListItem With {
                .ID = user.Id,
                .UserName = user.UserName,
                .Login = user.Login,
                .Title = user.Title,
                .Dep = user.Dep,
                .Mail = user.Mail,
                .Phone = user.Phone,
                .Picture = My.Resources.User128
            }
            allListItems.Add(listItem)
            FlowLayoutPanel1.Controls.Add(listItem)
        Next
    End Sub

    ' 搜索框文本变化时触发过滤
    Private Sub Txt_Search_TextChanged(sender As Object, e As EventArgs) Handles Txt_Search.TextChanged
        Dim searchKeyword = Txt_Search.Text.Trim().ToLower()
        ' 暂停布局逻辑，避免控件频繁显隐导致界面闪烁
        FlowLayoutPanel1.SuspendLayout()
        For Each item As CustomListItem In allListItems
            If String.IsNullOrEmpty(searchKeyword) Then
                ' 搜索框为空时展示全部项
                item.Visible = True
            Else
                ' 不区分大小写匹配UserName字段，包含关键词则显示，否则隐藏
                item.Visible = item.UserName.ToLower().Contains(searchKeyword)
            End If
        Next
        FlowLayoutPanel1.ResumeLayout()
    End Sub
End Class

Public Class UserList
    Public Property Id() As Integer
    Public Property UserName() As String
    Public Property Login() As String
    Public Property Title() As String
    Public Property Dep() As String
    Public Property Mail() As String
    Public Property Phone() As String
End Class

过滤功能使用说明 #

• 在窗体上添加一个文本框控件，命名为Txt_Search即可自动绑定上述过滤逻辑，无需额外按钮触发，输入时实时过滤。
• 默认实现不区分大小写的UserName模糊匹配，例如输入ben即可匹配所有UserName包含Ben的条目。
• 若需要调整匹配规则（如区分大小写、增加匹配字段），直接修改item.Visible对应的判断条件即可。

附：自定义控件CustomListItem无需做任何修改，原有属性定义和鼠标交互逻辑可直接复用。

内容的提问来源于stack exchange，提问作者Lider13