用SwiftUI写一个简单页面

时间 2019-11-21

标签 swiftui 一个简单页面繁體版

原文原文链接

级别：★★☆☆☆
标签：「iOS 13」「SwiftUI」「Xcode 11.1」
做者： 647
审校： QiShare团队php

前言：以前同事WYongW写了一篇《用Flutter写一个简单页面》，本篇将和你们一块儿调研一下苹果今年推出的SwiftUI框架。接下来，让咱们一块儿入门一下SwiftUI（尝尝鲜）。git

1、SwiftUI是什么？

1. 定义：

简单来讲，SwiftUI是苹果在 “WWDC-2019” 推出的一款全新的 “声明式UI” 框架。拆开看，Swift + UI。（由此能够看出Swift愈来愈重要）github

2. 特色：

“简洁迅速”的Swift：愈来愈简洁的Swift语法，配上Swift迅速的优点。编程
“即视”的UI：下降调试成本，一边写code、一边就可查看UI。swift
跨平台：一套代码，便可完成iOS、iPadOS、macOS、watchOS的开发与适配。微信

“声明式”编程：

简单来讲，对比以前的**“指令式”编程**，咱们一般须要告诉计算机**“怎么作”？而“声明式”编程是让咱们告诉计算机“作什么”**？（至于最底层怎么作，咱们无需关心。）app

举个例子，对于写UI而言，框架

指令式编程：就是，**怎么画？**把每一个frame、layout等等通通须要计算到位。
声明式编程：就是，**画什么？**把想要的效果描述出来，其余都交给框架去作。

3. 开发环境：

这么新的技术确定须要环境的支持。SwiftUI所须要的开发环境，以下：dom

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

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

2、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)
复制代码

3、SwiftUI快速上手实践

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

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

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
iOS 控制日志的开关
 iOS App中可拆卸一个framework的两种方式
 自定义WKWebView显示内容（一）
Swift 5.1 (6) - 函数
 Swift 5.1 (5) - 控制流
 Xcode11 新建工程中的SceneDelegate
iOS App启动优化（二）—— 使用“Time Profiler”工具监控App的启动耗时
 iOS App启动优化（一）—— 了解App的启动流程
 奇舞周刊