SwiftUI Tips:在 ViewBuilder 中方便的打印调试信息

我们在调试 SwiftUI View 的时候有时需要在打印一些内容。最常见的打印方式是使用print

swift 复制代码
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundStyle(.tint)
            let _ = print("my log")
            Text("Hello, world!")
        }
        .padding()
    }
}

但是如果想要打印某个 View 节点的信息(类型、属性)就有点不方便了。

假设我有一个自定义的控件,MyText,有一个公开的属性 title

swift 复制代码
struct MyText: View {
    let title: String
    
    var body: some View {
        Text(title)
            .foregroundColor(.red)
    }
}

要如何调试打印这个 MyText 的title 呢?这个时候直接使用 print 就不好用了。硬来的话只能多复制一个 MyText 了:

swift 复制代码
struct PrintView: View {
    var body: some View {
        VStack {
            MyText(title: "我的内容")
            let _ = print("mylog:\(MyText(title: "我的内容").title)")
        }
        .padding()
    }
}

可以通过自定义一个泛型打印函数来解决这个问题:

swift 复制代码
func printThrough<T>(
    _ t: T, 
    _ message: String? = nil, 
    map: ((T) -> String)? = nil
) -> T {
    let description = if let map {
        map(t)
    } else {
        String(describing: t)
    }

    let message = if let message {
        "\(message): '\(description)'"
    } else {
        description
    }

    print(message)

    return t
}

printThrough 第一个参数接收任意内容(view)。第二个参数可空接收要打印的字符串前缀,如果没有传入默认打印第一个参数的类型信息。第三个参数是个闭包,在闭包中可以获得第一个参数的实例,用于打印自定义的实例信息。

有了这个函数以后我们前面的需求就可以优雅地实现了:

swift 复制代码
struct ContentView: View {
    var body: some View {
        VStack {
            printThrough(
                Text("Hello, world!")
            )
            printThrough(
                MyText(title: "我的内容"),
                "MyLog",
                map: { "内容是:\($0.title)"})
        }
        .padding()
    }
}

控制台就会输出这样的结果:


相关推荐
东坡肘子18 小时前
从开放平台到受控生态:谷歌宣布 Android 开发者验证政策 | 肘子的 Swift 周报 #0101
android·swiftui·swift
HarderCoder1 天前
深入理解 SwiftUI 的 Structural Identity:为什么“换个条件分支”就会丢状态?
swiftui·swift
YungFan2 天前
Swift 6.2 新特性
swiftui·swift
大熊猫侯佩5 天前
当液态玻璃计划遭遇反叛者:一场 iOS 26 界面的暗战
swiftui·xcode·apple
雪糕吖6 天前
SwiftUI 自定义 Shape:实现顶部圆角矩形 RoundedTopRectangle
ios·swiftui
东坡肘子8 天前
写给这段旅程,也写给未来的自己 | 肘子的 Swift 周报 #0100
swiftui·swift·apple
大熊猫侯佩13 天前
SwiftUI 三阵诀:杨过绝情谷悟 “视图布阵” 之道
swiftui·swift·apple
东坡肘子15 天前
未来将至:人形机器人运动会 | 肘子的 Swift 周报 #099
swiftui·swift·apple
吴Wu涛涛涛涛涛Tao17 天前
基于TCA构建Instagram克隆:SwiftUI状态管理的艺术
ios·swiftui
麦兜*20 天前
Swift + Xcode 开发环境搭建终极指南
开发语言·ios·swiftui·xcode·swift·苹果vision pro·swift5.6.3