SwiftUI入门教程
SwiftUI写一个简单的页面
上面github链接教程写的很详细，但有的api可能有点出入，最好还是clone项目，自己跑起来研究下。
废话有点多，介意的直接看 正题三
写在前面
这段时间公司业务不是很忙，我们一直处于新技术探究阶段。前段时间学过flutter，总体来说还是很不错，不管是集成三方包，还是vscode新api学习成本，又或状态管理和路由管理的三方框架(如GetX) ，使用起来都特别顺手方便。之前因为业务需求，一直用的都是熟悉的oc，对SwiftUI也只是听听，没有怎么入手研究过。可能对没有接触过的人，对SwiftUI来说听的最多的词 应该就是声明式语言，UI库，一统苹果所有终端设备的新框架库等等。通过这两天的学习接触 SwiftUI确实是很棒。不啰嗦啦，进入正题~
@[TOC]
一、简洁高效的@State
二、好用的全局环境变量@EnvironmentObject
1、优点
2、代码使用
三、SwiftUI调用旧vc
1、创建wrapper并实现UIViewControllerRepresentable协议
2、SwiftUI中调用TestViewController
四、ViewController里调用SwiftUI页面
一、简洁高效的@State
在flutter中若改变某个值需更新界面的话，需要setState，显得很麻烦。但SwiftUI里面只要声明一个@State变量就好，真的是太好用。例如下面代码就是动态显示slider滑动的值，binding也很简洁，直接通过$加相应的变量即可。这种binding在TextField真的是特别好用。oc那种delegate回调方式根本没法比。
import SwiftUI
import Combine
struct SliderPage : View {
@State var rating = 0.5
var body: some View {
VStack {
Text("Slider Value: \(self.rating)")
Slider(value: $rating)
.padding(30)
}.navigationBarTitle(Text("Slider"))
}
}
二、好用的全局环境变量@EnvironmentObject
1、优点：整个app能全局共享该数据，且一旦数据更新，用到该数据的地方都会相应的更新。
2、代码使用
全局order变量
import SwiftUI
@main
struct iDineApp: App {
@StateObject var order = Order()
var body: some Scene {
WindowGroup {
MainView()
.environmentObject(order)
}
}
}
存储信息的Order 模型
import SwiftUI
class Order: ObservableObject {
@Published var items = [MenuItem]()
var total: Int {
if items.count > 0 {
return items.reduce(0) { $0 + $1.price }
} else {
return 0
}
}
func add(item: MenuItem) {
items.append(item)
}
func remove(item: MenuItem) {
if let index = items.firstIndex(of: item) {
items.remove(at: index)
}
}
}
使用全局Order
import SwiftUI
struct OrderView: View {
@EnvironmentObject var order: Order
var body: some View {
NavigationView {
List {
Section {
ForEach(order.items) { item in
HStack {
Text(item.name)
Spacer()
Text("$\(item.price)")
}
}
.onDelete(perform: deleteItems)
}
Section {
NavigationLink(destination: CheckoutView()) {
Text("Place Order")
}
}
.disabled(order.items.isEmpty)
}
.navigationTitle("Order")
.listStyle(InsetGroupedListStyle())
.toolbar {
EditButton()
}
}
}
func deleteItems(at offsets: IndexSet) {
order.items.remove(atOffsets: offsets)
}
}
以上代码来自github上iDine项目。
三、SwiftUI调用旧vc
SwiftUI如何调用项目中原来就有的ViewController?
思路：创建一个wrapper，实现UIViewControllerRepresentable协议，做相应的映射。例如，现在有个TestViewController，我们如何在SwiftUI点击某个link跳转到该页面。
1、创建wrapper并实现UIViewControllerRepresentable协议
import UIKit
import SwiftUI
// 这里只能用struct，不能用class
struct BFOViewControllerWrapper<T : UIViewController>: UIViewControllerRepresentable {
typealias UIViewControllerType = T
func makeUIViewController(context: UIViewControllerRepresentableContext<BFOViewControllerWrapper>) -> BFOViewControllerWrapper.UIViewControllerType {
return BFOViewControllerWrapper.UIViewControllerType()
}
func updateUIViewController(_ uiViewController: BFOViewControllerWrapper.UIViewControllerType, context: UIViewControllerRepresentableContext<BFOViewControllerWrapper>) {
//
}
}
2、SwiftUI中调用TestViewController
NavigationLink(
destination: BFOViewControllerWrapper<TestViewController>()) {
Text("跳转到TestViewController页面")
}
细心的网友，肯定注意到了上面的一个亮点，对 就是泛型的使用。这样使用虽然调用的时候感觉写的字母多了点，复杂了点，但BFOViewControllerWrapper却可以统一重复的使用，不但功能清晰，后续维护也很高效。
四、ViewController里调用SwiftUI页面
将SwiftUI页面放到一个UIHostingController里面，之后再正常跳转。如下某个vc点击按钮跳转到一个SwfitUI页面
import UIKit
import SwiftUI
class TestViewController: UIViewController {
lazy var lb: UILabel = {
let lb = UILabel(frame: CGRect(x: 50, y: 100, width: 200, height: 50));
lb.text = "我是UIViewController的文案"
lb.textColor = .red
lb.font = UIFont.systemFont(ofSize: 14)
return lb
}()
lazy var btn: UIButton = {
let btn = UIButton(frame: CGRect(x: 50, y: 200, width: 200, height: 50))
btn.setTitle("点我展示SwiftUI页面", for: .normal)
btn.setTitleColor(.blue, for: .normal)
btn.setTitleShadowColor(.red, for: .normal)
btn.backgroundColor = .green
btn.titleLabel?.font = UIFont.systemFont(ofSize: 14)
btn.layer.cornerRadius = 10
btn.layer.masksToBounds = true
btn.addTarget(self, action: #selector(clickBtn(button:)), for: .touchUpInside)
return btn
}()
// 点击按钮跳转到SwiftUI页面
@objc func clickBtn(button: UIButton){
print("you click btn")
if #available(iOS 13, *) {
let testSwiftUIView = UIHostingController(rootView: TextPage())
navigationController?.pushViewController(testSwiftUIView, animated: true)
}
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(lb);
view.addSubview(btn)
}
}
附：Swift高阶函数map，filter，reduce简单使用
map用于映射，可将一个列表转化成另一个列表，例如下面将数字列表转成字符串列表
//$0代表数组的元素
let array = [1, 2, 3, 4, 5 , 6, 7]
let result = array.map {
String($0)
}
filter 用于过滤，可以对数组中的元素按照某种规则进行过滤，例如下面输出大于5的元素
let array = [1, 2, 3, 4, 5 , 6, 7]
let result = array.filter {
$0 > 5
}
print("result: \(result)");
reduce用于计算或合并
//计算数组array元素的和
//在这里$0和$1的意义不同，$0代表元素计算后的结果，$1代表元素
//10代表初始化值，在这里可以理解为 $0初始值 = 10
let result3 = array.reduce(10){
$0 + $1
}
合并
let result4 = array.reduce(""){$0 + "\($1)"}// 转换为字符串并拼接
print("result4:",result4);
end
