在教程的一开始，我们就说过 SwiftUI 是跨平台的，本文主要讲解当开发好基于 iOS 的 App 以后，如何快速实现 watchOS 和 macOS 的跨平台 App。
创建watchOS App
-
给当前项目添加 watchOS 的 Target，选择 Xcode 菜单：
File > New > Target > watchOS > Watch App for iOS App。 -
和 iOS 一样，填写
Product Name、Language 和 User Interface等信息。 -
在弹出的对话框选择
Activate。 -
找到新建的 Target，然后点击 General 选项卡，选择
Supports Running Without iOS App Installation复选框。 -
复制 iOS 项目中的文件到
项目名-Extension中，这里面有个ContentView.swift文件。 -
编译程序，由于并不是所有的 View 都是通用的，所以一般会报错，根据错误修改。
-
根据当前设备的尺寸与分辨率，调整 App 的 UI 进行适配。
-
修改完成以后，在运行按钮上，可供选择的 Target 就有了刚刚创建 watchOS App，然后选择一个模拟器（或真机）运行即可。
创建macOS App
-
给当前项目添加 macOS 的 Target，选择 Xcode 菜单：
File > New > Target > macOS > App。 -
和 iOS 一样，填写
Product Name、Language 和 User Interface等信息。 -
找到新建的 Target，然后点击 General 选项卡，根据开发的应用程序依赖的 macOS 版本特性，修改
Deployment Target。 -
复制 iOS 项目中的文件到该项目中，macOS 的项目目录与 iOS 的几乎一样。
-
编译程序，由于并不是所有的 View 都是通用的，所以一般会报错，根据错误修改。
-
根据当前设备的尺寸与分辨率，调整 App 的 UI 进行适配。
-
修改完成以后，在运行按钮上，可供选择的 Target 就有了刚刚创建 macOS App，然后直接运行，该 App 就会直接运行到当前的电脑上。
案例
以前面提过的天气预报列表为例来看看 SwiftUI 如何实现跨平台 App 开发。
iOS
代码
struct ContentView : View {
let titles = ["2019.10.21", "2019.10.22","2019.10.23","2019.10.24","2019.10.25","2019.10.26","2019.10.27"]
let subtitles = ["星期一", "星期二","星期三","星期四","星期五","星期六","星期日"]
let details = ["下雨", "晴天","有雾","多云","阴天","下雪","大风"]
var body: some View {
List(0..<self.titles.count) { item in
HStack {
VStack {
Text(self.titles[item])
.foregroundColor(.orange)
.bold()
.font(.system(.title))
Text(self.subtitles[item])
.foregroundColor(.gray)
.font(.system(.title))
}.padding(.trailing, 50)
Text(self.details[item])
.foregroundColor(.blue)
.font(.system(.largeTitle))
.italic()
}.padding()
}
}
}
实现效果
iPhone.png
watchOS
如果直接运行 iOS 的代码，虽然不报错但 UI 会显示很难看，所以需要调整一下。
代码
struct ContentView : View {
let titles = ["2019.10.21", "2019.10.22","2019.10.23","2019.10.24","2019.10.25","2019.10.26","2019.10.27"]
let subtitles = ["星期一", "星期二","星期三","星期四","星期五","星期六","星期日"]
let details = ["下雨", "晴天","有雾","多云","阴天","下雪","大风"]
var body: some View {
List(0..<self.titles.count) { item in
HStack {
VStack {
Text(self.titles[item])
.foregroundColor(.orange)
.bold()
.font(.system(.title))
Text(self.subtitles[item])
.foregroundColor(.gray)
.font(.system(.subheadline)) // 修改字体大小
}.padding(.trailing, 5) // 修改边距
Text(self.details[item])
.foregroundColor(.blue)
.font(.system(.largeTitle))
.italic()
}.padding()
}
}
}
实现效果
watchOS.gif
macOS
如果直接运行 iOS 的代码，虽然不报错但浪费了很多空间，因为默认窗口的大小为width: 480, height: 300，所以需要调整一下。
代码
struct ContentView : View {
let titles = ["2019.10.21", "2019.10.22","2019.10.23","2019.10.24","2019.10.25","2019.10.26","2019.10.27"]
let subtitles = ["星期一", "星期二","星期三","星期四","星期五","星期六","星期日"]
let details = ["下雨", "晴天","有雾","多云","阴天","下雪","大风"]
var body: some View {
List(0..<self.titles.count) { item in
HStack() { // 全部横向显示
Text(self.titles[item])
.foregroundColor(.orange)
.bold()
.font(.system(size: 30)) // 调整字体
.frame(minWidth: 180, maxWidth: 200) // 设置frame
Text(self.subtitles[item])
.foregroundColor(.gray)
.font(.system(size: 20)) // 调整字体
.frame(minWidth: 80).padding() // 设置frame
Text(self.details[item])
.foregroundColor(.blue)
.font(.system(.largeTitle))
.italic()
.frame(minWidth: 50, maxWidth: 200) // 设置frame
}.padding()
}
}
}
实现效果
macOS.gif
网友评论