SwiftUI基础篇Cross-platform

watchOS、macOS

关于SwiftUI的跨平台
如何在macOS上获取半透明list
如何在watchOS上制作轮播列表
使用digitalCrownRotation()在watchOS上读取数字表冠
macOS如何打开新Window
watchOS如何启用垂直页面滚动

概述

文章主要分享SwiftUI Modifier的学习过程，将使用案例的方式进行说明。内容浅显易懂，Cross-platform部分调试，不过测试代码是齐全的。如果想要运行结果，可以移步Github下载code -> github案例链接

1、关于SwiftUI的跨平台

当苹果宣布SwiftUI时，他们做了一个重要的区别：SwiftUI不是一个多平台框架，而是一个在多个平台上创建App的框架。这看起来像是用两种不同的方式表达同一件事，但实际上这意味着SwiftUI的许多部分在iOS上可以使用，但在macOS上不可用。

应用程序的核心保持不变：模型、网络和大部分用户界面。但要获得好用的App（构建真正适合每个Apple平台的应用程序），需要添加一些特定于平台的增强功能：

你的应用程序如何在watchOS上如何使用Digital Crown？
tvOS上播放/暂停按钮怎么样？
或者macOS上的右键菜单？

如何将这些问题有效的解决是构建多平台体验的关键。

2、如何在macOS上获取半透明list

macOS的一个微妙但重要的功能是当窗口处于活跃状态时，侧边栏会自动变的稍微透明，然后当窗口移动到背景时变不透明。这是向用户展示那个窗口处于活跃状态的一个小提示，但也让他们的背景展示出来，给他们一些关于他们的环境的背景。SwiftUI可以使用listStyle()修饰符来创建这些半透明侧边栏List，传入.sidebar。

Swift 复制代码

struct FFMacOSTranslucent: View {
    var body: some View {
        NavigationStack {
            List(1..<51) {
                Text("meta \($0)")
            }
            .listStyle(.sidebar)
        }
    }
}

在iOS和iPadOS上，.siderbar不提供半透明背景，但会影响单元格样式。

调试结果

作者案例结果

macOS 14.0 beta（23A5286i）、Xcode 15.0 beta 2 (15A5161b) 调试结果

只贴了macOS的结果，并未出现半透明效果，由于没有其他xcode版本提供测试，暂定结论添加了修饰符.listStyle(.sidebar)半透明效果无效。

3、如何在watchOS上制作轮播列表

wathhOS有一种特别常见的列表样式，可以使用以下的方式轻松复制，List列表中的行在移动到屏幕上时滑动并放大，在移出屏幕时滑动并缩小。

要启用此轮播效果，使用.listStyle()修饰符和.carousel属性。

Swift 复制代码

#if (watchOS)
struct FFWatchOSCarousel: View {
    var body: some View {
        List(1..<51) {
            Text("meta \($0)")
        }
        .listStyle(.carousel)
    }
}


#Preview {
    FFWatchOSCarousel()
}
#endif

4、使用digitalCrownRotation()在watchOS上读取数字表冠

SwiftUI通过两个修饰符可以控制数字表冠，必须使用这两个修饰符才能使用表冠作为输入。第一个是focusable()，当想让相关视图能够接受Digital Crown更新时使用。还有一个digitalCrownRotation()

Swift 复制代码

#if (watchOS)
struct FFWatchOSDigitalCrown: View {
    @State var scrollAmount = 0.0
    
    var body: some View {
        //设置一个以0.1为步长从1到5，从开始到结束环绕，并带有触觉反馈。
        Text("Scroll: \(scrollAmount)")
            .focusable(true)
            .digitalCrownRotation($scrollAmount, from: 1, through: 5, by: 0.1, sensitivity: .low, isContinuous: true, isHapticFeedbackEnabled: true)
    }
}

#Preview {
    FFWatchOSDigitalCrown()
}
#endif

在文本中显示的滚动值的范围是：负无穷大到正无穷大。digitalCrownRotation()修饰符还有其他几种形式，可以更好的控制她的行为方式：

from和through设置滚动范围
by设置步长，控制表冠每次转动时改变的量
sensitivity确定表冠需要移动多少才能出发变化
isContinuous确定值达到最小值或最大值是是否回绕，后者是否尽在这些边界值是停止更改。
isHapticFeedbackEnabled确定转弯时是否触觉反馈。

5、macOS如何打开新Window

SwiftUI提供了一个openWindow环境密钥，可以在macOS上创建新的窗口。首先，编辑App场景以包含新的Window，这意味着提供了一个窗口标题，同时也提供了一个标识符。

Swift 复制代码

struct FFWindowOpen: View {
    @Environment(\.openWindow) var openWindow
    
    var body: some View {
        Button("Show What's New") {
            openWindow(id: "whats-new")
        }
    }
}

也可以通过"window"菜单打开窗口，macOS将使用你提供的窗口标题自动将其显示在哪里。

6、watchOS如何启用垂直页面滚动

SwiftUI提供了一种.verticalPage选项卡视图样式，可以在watchOS上制作垂直滚动的选项卡，而不是默认的水平滚动选项卡。因为他们与滚动list一起存在，所以仔细考虑将两者一起搭配使用。

Swift 复制代码

#if watchOS
struct FFScrollingVertical: View {
    var body: some View {
        TabView {
            Text("First")
                .navigationTitle("First Title")
            Text("Second")
                .navigationTitle("Second Title")
            Text("Third")
                .navigationTitle("Third Title")
        }
        .tabViewStyle(.verticalPage)
        //当用户滚动时，watchOS将自动使用每个选项卡的导航Title
        //在处理选项卡内的其他滚动容器是，必须不断滚动到选项卡中的最后一个视图，否者用户可能会尝试快速浏览并意外更改选项卡。
        
        TabView {
            Text("First")
                .navigationTitle("First Title")
            Text("Second")
                .navigationTitle("Second Title")
            List(0..<50) { i in
                Text("meta \(i)")
            }
            .navigationTitle("Meta Title")
        }
        .tabViewStyle(.verticalPage)
    }
}

#Preview {
    FFScrollingVertical()
}
#endif