【界面UI】背包页签：多页签的切换与分类视图

实战应用：用在哪里

背包是多页签的典型场景：全部、装备、消耗、材料、任务五个页签，切换时只显示对应分类的物品。页签的切换要处理数据的过滤、控件的重用与选中态的高亮，分类视图的流畅度决定背包的体验下限。

页签的切换

---背包页签的切换
local TAB_TYPES = { "all", "equip", "consume", "material", "quest" }
function BagTab.switch(tabIndex)
    local tabType = TAB_TYPES[tabIndex]
    for _, item in ipairs(bagItems) do
        local show = (tabType == "all") or (item.category == tabType)
        item.widget:setVisible(show)
    end
    highlightTab(tabIndex)
end

页签切换按分类过滤物品的可见性，全部页签显示所有物品，分类页签只显示对应类型的物品。高亮当前页签的按钮，切换的动画用淡入过渡。页签的记忆：切出再切回时保持上次的页签选择，状态的记忆是细节品质。

物品的分类视图

---分类过滤的实现
function BagTab.filterItems(items, tabType)
    local out = {}
    for _, item in ipairs(items) do
        if tabType == "all" or item.category == tabType then
            out[#out + 1] = item
        end
    end
    return out
end

分类过滤用单遍遍历构建输出表，过滤的复杂度 O(n)。物品的 category 字段在入库时标注，分类的准确性依赖入库时的标注质量。背包的搜索框配合页签实现二级过滤：先选页签再输入关键字，搜索的结果在当前页签内匹配。

验证与监控

页签的切换频率与每个页签的停留时长统计，冷门页签是分类优化的候选。

踩坑记录

页签的切换曾经重建全部控件，大背包的切换卡顿明显，改为控件的显隐切换后流畅。分类的字段曾经与物品定义的分类不一致，新物品入库时分类字段漏填导致物品消失，入库的分类校验是数据的守门员。

上线要点

页签的默认选中记忆上次的页签，重新打开背包时恢复到上次的分类。页签的红点提示：某分类有新物品时红点亮起，红点的清除在切换到该页签时完成。背包的分类视图与搜索框的组合是道具管理的标准配置，分类的准确性依赖物品定义的分类字段。

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付，内容以官方知识库与真实项目为出处，按版本持续修订。