SwiftUI-跨平台

YungFan

发布于 2020-03-20 12:31:54

1.8K0

发布于 2020-03-20 12:31:54

文章被收录于专栏：学海无涯学海无涯

在教程的一开始，我们就说过 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()
        }
    }
}

实现效果

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