iOS 用SwiftUI写一个简单页面

前语： 本篇将和大家一起调研一下苹果在WWDC2019推出的SwiftUI结构。 接下来，让咱们一起入门一下SwiftUI（尝尝鲜）。

一、SwiftUI是什么？

1. 定义：

简略来说，SwiftUI是苹果在 “WWDC-2019”推出的一款全新的“声明式UI” 结构。 拆开看，Swift + UI。（由此能够看出Swift越来越重要）

2. 特点：

  • “简练迅速”的Swift：越来越简练的Swift语法，配上Swift迅速的优势。

  • “即视”的UI：下降调试本钱，一边写code、一边就可检查UI。

  • 跨平台：一套代码，即可完成iOS、iPadOS、macOS、watchOS的开发与适配。

iOS 用SwiftUI写一个简单页面

  • “声明式”编程：

简略来说，比照之前的**“指令式”编程**，咱们一般需求告知计算机**“怎么做”？ 而“声明式”编程是让咱们告知计算机“做什么”**？（至于最底层怎么做，咱们无需关心。）

举个比如，对于写UI而言，

  • 指令式编程：便是，**怎么画？**把每个frame、layout等等统统需求计算到位。
  • 声明式编程：便是，**画什么？**把想要的效果描绘出来，其他都交给结构去做。
3. 开发环境：

这么新的技能必定需求环境的支撑。SwiftUI所需求的开发环境，如下：

  • Xcode：Xcode 11.1+。
  • MacOS：MacOS 10.15+。
  • iOS：iOS 13+。

PS：因为SwiftUI只能应用与iOS 13系统以上的设备。 因而，这项技能不建议用在需求适配低版本（iOS 13 以下）的App上。 不过如果是无需适配低版本的新项目，或许学习者全能够上手“玩一玩”。 究竟苹果的新技能仍是很有意思的嘛~

二、SwiftUI的根本组件（语法）

这块知识比较“基础”且“重要”。只要记住了这些根本组件，咱们才能用较少的代码开发出精巧的App。

下面，我将给大家介绍一些重要的SwiftUI组件：

组件介绍：

名称 意义
Text 用来显现文本的组件，相似UIKit中的UILabel。
Image 用来展现图片的组件，相似UIKit中的UIImageView。
Button 用于可点击的按钮组件，相似UIKit中的UIButton。
List 用来展现列表的组件，相似UIKit中的UITableView。
ScrollView 用来支撑滑动的组件，相似UIKit中的UIScrollView。
Spacer 一个灵敏的空间，用来填充空白的组件。
Divider 一条分割线，用来区分区域的组件。
VStack 将子视图按**“竖直方向”**摆放布局。（Vertical stack）
HStack 将子视图按**“水平方向”**摆放布局。（Horizontal stack）
ZStack 将子视图按**“两轴方向均对齐”**布局（居中，有重叠效果）

根本组件：

  • Text：用来显现文本的组件，相似UIKit中的UILabel。
Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))
  • Image：用来展现图片的组件，相似UIKit中的UIImageView。
Image.init(systemName: "star.fill").foregroundColor(.yellow)
  • Button：用于可点击的按钮组件，相似UIKit中的UIButton。
Button(action: { self.showingProfile.toggle() }) {
    Image(systemName: "paperplane.fill")
        .imageScale(.large)
        .accessibility(label: Text("Right"))
        .padding()
}
  • List：用来展现列表的组件，相似UIKit中的UITableView。
List(0..<5){_ in
        NavigationLink.init(destination: VStack(alignment:.center){
            Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
            Text("概况界面\(item + 1)").font(.system(size: 16))
    }) {
          //ListRow
       }

  • ScrollView：用来支撑滑动的组件，相似UIKit中的UIScrollView。

  • Spacer：一个灵敏的空间，用来填充空白的组件。

  • Divider：一条分割线，用来区分区域的组件。

布局组件：

  • VStack：将子视图按**“竖直方向”**布局。（Vertical stack）

  • HStack：将子视图按**“水平方向”**布局。（Horizontal stack）

  • ZStack：将子视图按**“两轴方向均对齐”**布局。

功用组件：

  • NavigationView：担任App中导航功用的组件，相似UIKit中的UINavigationView。

  • NavigationLink：担任App页面跳转的组件，相似于UINavigationView中的push与pop功用。

NavigationView {
    List(0..<5){_ in
        NavigationLink.init(destination: VStack(alignment:.center){
            Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
            Text("概况界面\(item + 1)").font(.system(size: 16))
    }) {
          //ListRow
       }
}
.navigationBarTitle("导航\(item)",displayMode: .inline)
  • TabView：担任App中的标签页功用的组件，相似UIKit中的UITabBarController。
TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)

三、SwiftUI快速上手实践

下面让咱们快速完成一个有TabView、NavigationView、List的Demo。

iOS 用SwiftUI写一个简单页面

SF Symbols 是从 iOS 13 和 macOS 10.15 开始内置于系统中的字符图标库，它供给了上千种常见的线条图标，而且咱们能够任意地为它们设置尺寸，色彩等特点。Apple 乃至准备了专门的app：SF Symbols来协助你检查可用的符号：

接下来就让咱们用这些Symbols制造个小Demo。

  • ContentView：
import SwiftUI
struct ContentView: View {
    @State var isLeftNav = false
    @State var isRightNav = false
    init() {
        //修改导航栏文字色彩
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.systemBlue]
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.systemBlue]
        UINavigationBar.appearance().tintColor = .systemBlue
    }
    var body: some View {
        TabView {
            // Tab1:
            NavigationView {
                List(Symbols, id:\.self) {
                    ListRow(symbol: $0)
                }
                .navigationBarTitle(Text("SF Symbols"))
                .navigationBarItems(leading: leftNavButton, trailing: rightNavButton)
            }.tabItem {
                Image.init(systemName: "star.fill")
                Text("Tab1").font(.subheadline)
            }
            // Tab2:
            NavigationView {
                Text("This is the second tab.")
            }.tabItem {
                Image.init(systemName: "star.fill")
                Text("Tab2").font(.subheadline)
            }
        }
    }
    var leftNavButton: some View {
        Button(action: { self.isLeftNav.toggle() }) {
            Image(systemName: "person.crop.circle")
                .imageScale(.large)
                .accessibility(label: Text("Left"))
                .padding()
        }
        .sheet(isPresented: $isLeftNav) {
            VStack {
                Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))
                HStack {
                    Spacer()
                    Spacer()
                    Text("an iOS Team. ").fontWeight(.black).foregroundColor(.purple)
                    Spacer()
                    Text("We are learning SwiftUI.").foregroundColor(.blue)
                    Spacer()
                }
            }
        }
    }
    var rightNavButton: some View {
        Button(action: { self.isRightNav.toggle() }) {
            Image(systemName: "paperplane.fill")
                .imageScale(.large)
                .accessibility(label: Text("Right"))
                .padding()
        }
        .sheet(isPresented: $isRightNav, onDismiss: {
            print("dissmiss RrightNav")
        }) {
            ZStack {
                Text("This is the Right Navi Button.")
            }
        }
    }
}
  • ListRow：List对应的Cell
struct ListRow: View {
    var symbol: String
    var body: some View {
        NavigationLink(destination: ListDetail(symbol: symbol)) {
            HStack {
                //图片
                Image(systemName: symbol)
                    .resizable()
                    .frame(width: 60, height: 60)
                    .foregroundColor(Colors.randomElement())
                //分割
                Divider()
                Spacer()
                //文字
                Text(symbol)
                Spacer()
            }
        }
    }
}
  • ListDetail：
import SwiftUI
struct ListDetail: View {
    var symbol: String
    var body: some View {
        VStack {
            Text("Image:").font(.headline)
            Spacer()
            Image(systemName: symbol)
                .foregroundColor(Colors.randomElement())
                .imageScale(.large)
                .scaleEffect(3)
                .padding(.bottom, 100)
            Divider()
            Text("Image Name:").font(.headline)
            Spacer()
            Text(symbol)
                .font(.largeTitle)
            Spacer()
        }
        .navigationBarTitle(symbol)
    }
}

源码：本文Demo