SwiftUI初体验

转载自https://ecloud.10086.cn/api/query/developer/user/home.html?ticket=ST-387353-wHoLnoT5PYwTtqPGh4lu-cas01.example.org#L2FwaS9xdWVyeS9kZXZlbG9wZXIvYmxvZy9ibG9nZGV0YWlsLmh0bWw/YmxvZ19pZD1jNzllNTBiNWI1ZGQ0ODJhOTAzOTIxNTAzNzBmZTUzZQ==

SwiftUI初体验

什么是SwiftUI

苹果于2019年度WWDC全球开发者大会上，发布了基于Swift建立的声明式框架–SwiftUI，借助 SwiftUI，您可以利用 Swift 的强大功能打造适合各个 Apple 平台的精美 app，而无需编写大量代码。SwiftUI 让您只需使用一套工具和 API，就能在任何 Apple 设备上为所有用户带来更加出色的体验。

SwiftUI 采用声明式语法，您只需声明用户界面应具备的功能便可。例如，您可以写明您需要一个由文本栏组成的项目列表，然后描述各个栏位的对齐方式、字体和颜色。您的代码比以往更加简单直观和易于理解，可以节省您的时间和维护工作。

SwiftUI使用

下面我们来按照苹果官方教程来个demo。

创建新项目

1. 打开Xcode,选择 “Create a new Xcode project” ，或者选择 File > New > Project.

2. 在模板选择页面，选择iOS平台，APP模板，然后下一步，Interface选择SwiftUI 

3.后面步骤同原来的iOS应用流程创建。

开始我们的新Demo

首先来看一下效果图

1. 首先来看下入口文件，

import SwiftUI

@main
struct SwiftUIDemoApp: App {
    @StateObject private var modelData = ModelData()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(modelData)
        }
    }
}

SwiftUIDemoApp 遵循App协议，实现body方法，是ContentView。

2.ContentView实现如下图，SwiftUI可以做到即时更新界面，时代码会立即以预览形式显示，对预览进行的任何更改会立即反映在代码中。

左侧栏为文件显示区域，中间是选中的文件代码显示，右侧为界面显示。

3.我们以同样的方式创建 LandmarkRow， LandmarkList

LandmarkRow:

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)
            Text(landmark.name)
            Spacer()
            if landmark.isFavorite {
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
            }
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: ModelData().landmarks[0])
            LandmarkRow(landmark: ModelData().landmarks[1])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}

LandmarkList:

import SwiftUI

struct LandmarkList: View {
    @EnvironmentObject var modelData: ModelData
    @State var showFavoritesOnly = false

    var filteredLandmarks: [Landmark] {
        modelData.landmarks.filter { landmark in
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }

    var body: some View {
        
        NavigationView {
            List {
                Toggle(isOn: $showFavoritesOnly) {
                    Text("Favorites only")
                }

                ForEach(filteredLandmarks, id: \.id) { landmark in
                    NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                        LandmarkRow(landmark: landmark)
                    }
                }
            }
            .navigationTitle("Landmarks")
        }

    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
            .environmentObject(ModelData())
    }
}

LandmarkDetail:

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark
    var body: some View {
        ScrollView {
            MapView()
                .frame(height:300)
                .ignoresSafeArea(edges: .top)
            CircleImage(image: landmark.image)
                .offset(y: -260)
                .padding(.bottom, -260)
            VStack(alignment: .leading) {
                Text(landmark.name)
                    .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
                HStack {
                    Text(landmark.park)
                        .font(.subheadline)
                    Spacer(minLength: 20)
                    Text("California")
                                        .font(.subheadline)
                }
                .font(.subheadline)
                                .foregroundColor(.secondary)
                Divider()
                Text(landmark.park).font(.subheadline)
                Text(landmark.state).font(.subheadline)
            }
            .padding()
            Spacer()
        }
    }
}

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkDetail(landmark: ModelData().landmarks[0])
    }
}

4. 使用到的组件介绍 

SwiftUI的布局方式同CSS的弹性布局很像 

HStack: 水平布局

VStack：垂直布局 

ScrollView：滚动组件 

List：列表组件

其他还有常用组件：Button，Text，Image等

总结

1.SwiftUI使用的是一种全新UI构建方式--声明式UI，和flutter类似。

2.目前SwiftUI的组件还很少，需要社区更大贡献。

3.SwiftUI可以跨Apple的多个平台。

4.使用的门槛很高，只能在iOS 13以上的系统使用，普及还需要很长时间。