自动滚动头部菜单 - SwiftUI & Combine

特性

在列表上下滚动时自动滚动顶部菜单
从顶部菜单导航到任何部分
智能检测用户视野中的活动位置
菜单和类别颜色强度根据配色方案自动调整，无需为每个方案设置颜色
项目菜单宽度分配的各种策略
设置菜单的自定义颜色
自定义菜单项样式[圆形或方形]
多平台
支持深色和浅色模式

要求

需要定义三个必需的接口

协议	描述
IMenuItem	枚举 - 菜单类别
IListModel	结构体 - 列表项模型
IItemTpl	结构体 - 项目视图模板

1. 枚举

定义符合 IMenuItem 的 enum。来自包 d3_menu_bar 的协议。它是菜单和列表部分标题的类别

    import d3_menu_bar

    enum MenuItems: String, IMenuItem {

        case breakfast = "Breakfast"        
        case lunch = "Lunch"        
        case dessert = "Dessert"
    }

2. 模型

定义符合 IListModel 的 model。

添加您需要在列表行表示中使用的字段

    struct ListModel : IListModel{
        
        let id = UUID()
        
        let category: MenuItems
        
        let title : String
    }

3. 模板

为 2. Model 定义符合 IItemTpl 的 view。

模板的所有表示形式都取决于您。故意将其包含在组件的 API 中，以便通过配置轻松控制列表表示形式。

    struct ItemTpl: IItemTpl {

        let item: ListModel

        var body: some View {
            VStack{
                Text(item.title)
                Divider()
            }.padding()
        }
    }

4. 创建自动滚动头部菜单

items - 数据数组
content - 项目表示的模板

    let data: [ListModel] = //Pass array of data
    ScrollableMenuList(items: data, content: { ItemTpl(item: $0) })

可选

menuBarStrategy - 项目菜单宽度分配的默认策略是 auto

尺寸策略	描述
fit	分配所有可用的空间，不可滚动
auto	根据内容自动调整大小
flex(CGFloat)	设置最小宽度

menuBarColor - 默认值为 .blue
menuBarStyle - 默认样式为 square

样式	描述
round	圆角
square	方角

代码示例

查看 ScrollableMenuListExample.swift 中的示例预览，或者创建一个项目，添加该包，并将 ScrollableMenuListExample() 放入 ContentView()

文档 (API)

您需要安装 Xcode 13 才能访问 Documentation Compiler (DocC)
转到 Product > Build Documentation 或 ⌃⇧⌘ D