SwiftUI-跨平台

yungfan· 2020-02-26

在教程的一开始,我们就说过 SwiftUI 是跨平台的,本文主要讲解当开发好基于 iOS 的 App 以后,如何快速实现 watchOS 和 macOS 的跨平台 App。

创建watchOS App

  1. 给当前项目添加 watchOS 的 Target,选择 Xcode 菜单:File > New > Target > watchOS > Watch App for iOS App

  2. 和 iOS 一样,填写 Product Name、Language 和 User Interface等信息。

  3. 在弹出的对话框选择Activate

  4. 找到新建的 Target,然后点击 General 选项卡,选择 Supports Running Without iOS App Installation 复选框。

  5. 复制 iOS 项目中的文件到 项目名-Extension中,这里面有个ContentView.swift文件。

  6. 编译程序,由于并不是所有的 View 都是通用的,所以一般会报错,根据错误修改。

  7. 根据当前设备的尺寸与分辨率,调整 App 的 UI 进行适配。

  8. 修改完成以后,在运行按钮上,可供选择的 Target 就有了刚刚创建 watchOS App,然后选择一个模拟器(或真机)运行即可。

创建macOS App

  1. 给当前项目添加 macOS 的 Target,选择 Xcode 菜单:File > New > Target > macOS > App

  2. 和 iOS 一样,填写 Product Name、Language 和 User Interface等信息。

  3. 找到新建的 Target,然后点击 General 选项卡,根据开发的应用程序依赖的 macOS 版本特性,修改 Deployment Target

  4. 复制 iOS 项目中的文件到该项目中,macOS 的项目目录与 iOS 的几乎一样。

  5. 编译程序,由于并不是所有的 View 都是通用的,所以一般会报错,根据错误修改。

  6. 根据当前设备的尺寸与分辨率,调整 App 的 UI 进行适配。

  7. 修改完成以后,在运行按钮上,可供选择的 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()
        }
    }
}

实现效果

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

实现效果

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

实现效果

广东快乐十分