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。

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

在iOS和iPadOS上，.siderbar不供给半透明布景，但会影响单元格款式。

调试成果

作者事例成果

SwiftUI基础篇Cross-platform

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

SwiftUI基础篇Cross-platform

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

3、如安在watchOS上制造轮播列表

wathhOS有一种特别常见的列表款式，能够运用以下的方法轻松复制，List列表中的行在移动到屏幕上时滑动并扩大，在移出屏幕时滑动并缩小。

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

#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()

#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，这意味着供给了一个窗口标题，一同也供给了一个标识符。

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一同存在，所以细心考虑将两者一同搭配运用。

#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