如何使用 Xcode 15 新组件 TipKit

TipKit 介绍

今年的 WWDC 发布了一个新的 UI 组件库 TipKit，运用 TipKit 能够很便利的在 iOS/macOS/watchOS 等渠道的 App 上展现一个提示框，并且内置了 UI 布局，并且支持装备展现频率、规矩等功能。

今日 Xcode 15 Beta 5 发布了，TipKit 也总算带了进来，我大约尝试了一下这套 API，和一个月前 WWDC 的视频教程上有些不一样的当地，今日就来讲讲怎样运用。

今日的代码运用 SwiftUI 来演示。

发动装备

想要正常展现 Tip 组件，需求在 App 发动入口加载和装备应用程序中所有 Tip 的统一状态：

import SwiftUI
import TipKit
@main
struct TipKitDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .task {
                    try? await Tips.configure()
                }
        }
    }
}

这儿的 Tips.configure() 函数支持设置一系列用于自界说 Tip 的选项，我这儿没有传参数，它会自动帮我装备默认值。

自界说 Tip

首要导入 TipKit 结构：

然后声明一个 struct 承继 Tip：

struct MyTip: Tip {
    var title: Text {
        Text("Tip Title")
    }
}

Tip 是一个协议，title 是必须实现的，其他值都可选。

展现 Tip

Tip 有两种展现方法，popover 和 Inline，popover 需求在指定的元素上运用 popoverTip 办法挂载这个 Tip，Tip 展现出来后会有个箭头指向这个元素，比方我在保藏按钮下展现这个 Tip：

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star")
                .imageScale(.large)
                .foregroundStyle(.tint)
                .popoverTip(MyTip(), arrowEdge: Edge.top) { action in
                    print(action)
                }
        }
        .padding()
    }
}

看下作用：

Inline 的方法是作为一个独立的 View 展现在视图上的，需求用到 TipView 组件：

Tip 的 UI 装备

刚刚提到 Tip 是一个协议，能够装备一些其他 UI，比方，在标题下方增加一行描绘 (下边的作用截图均以 popover 的方法展现)：

struct MyTip: Tip {
    var title: Text {
        Text("Save as a Favorite")
    }
    var message: Text? {
        Text("Your favorite backyards always appear at the top of the list.")
    }
}

增加图标：

struct MyTip: Tip {
    // 其他代码...
    var asset: Image? {
        Image(systemName: "star")
    }
}

增加按钮

struct MyTip: Tip {
    // 其他代码...
    var actions: [Action] {
        [
            Action(id: "1", title: "Learn More", perform: {
                print("点击了第一个按钮")
            }),
            Action(id: "2", title: "OK", perform: {
                print("点击了第二个按钮")
            })
        ]
    }
}

装备规矩

除此之外，还能够装备一系列显现的规矩，比方我界说一个 Bool 来操控这个 Tip 的展现与躲藏：

struct MyTip: Tip {
    @Parameter
    static var isShowing: Bool = false
    // ...其他代码...
    var rules: [Rule] {
        [
            #Rule(MyTip.$isShowing) { $0 == true }
        ]
    }
}

然后咱们再稍微改一下 ContentView 的代码，每次点击按钮的时分反转 isShowing 这个参数，来操控 Tip 的呈现和消失：

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                 // 操控躲藏和呈现
                MyTip.isShowing.toggle()
            }, label: {
                Image(systemName: "star.fill")
            })
            .popoverTip(MyTip(), arrowEdge: Edge.top) { action in
                print(action)
            }
        }
        .padding()
    }
}

这样咱们就能够经过点击按钮来展现和躲藏这个提示框了：

这儿需求留意，目前 Xcode Beta 5 有个已知的问题是不能正常拜访 @Parameter 这个宏，解决办法是在项目的 Build Settings 的 Other Swift Flags 中手动增加 -external-plugin-path (SYSTEM\_DEVELOPER\_DIR)/Platforms/iPhoneOS.platform/Developer/usr/lib/swift/host/plugins#(SYSTEM_DEVELOPER_DIR)/Platforms/iPhoneOS.platform/Developer/usr/bin/swift-plugin-server，不然无法编译经过

装备显现选项

经过 TipOption 能够装备一些额定的展现选项，比方我这儿装备这个 Tip 最大显现 5 次：

struct MyTip: Tip {
    // ...其他代码...
    var options: [TipOption] {
        [            Tips.MaxDisplayCount(5)        ]
    }
}

更多的装备大家能够自行探究。

参考资料

[1]

Xcode 15 Beta 5 Release Notes: developer.apple.com/documentati…

点击下方大众号卡片，重视我，每天分享一个关于 iOS 的新知识

本文同步自微信大众号 “iOS新知”，每天按时分享一个新知识，这儿只是同步，想要及时学到就来重视我吧！