美文网首页SwiftUI - 基础到实战
SwiftUI - 项目进阶知识点

SwiftUI - 项目进阶知识点

作者: Lcr111 | 来源:发表于2023-02-26 21:56 被阅读0次

前言

在学习了SwiftUI中的基本的视图和属性样式以及界面布局的一下知识点后,我们就可以玩玩一些小项目了,来看看数据在SwiftUI中是怎样传输或者使用的。

1、State

前面的很多例子中我们已经使用过@State,类似于之前使用的成员属性一样,不同的是@State修饰的变量不用手动调用界面刷新,只要变量改变就会自动刷新UI。
@State官方建议使用private,即在当前界面使用的变量,不可以在对象间使用。

2、Binding

@Binding 可以在不同的对象间传值。它所修饰的变量不是变量本身改变,而是变量的引用改变。
结合$xxx(投影属性)使用在代码中。

3、AppStorage

AppStorage类似之前用的NSUserDefault,用于存储一些轻量级的数据。是一个属性包装器。所存储的数据是全局的

//messageKey 相当于key 寻找value时候用
//message 当前变量 装载数据
@AppStorage("messageKey") var message: String = ""

VStack{
            Text("已经存储数据:\n\(message)")
            TextField("输入保存的数据",text: $message)
                .padding(10).border(.orange, width: 2)
            Button("按钮保存"){
                message = "按钮保存的数据"
            }.font(.title)
        }.padding()

输入框输入时,数据改变时,本地存储实时改变所存储数据,推出App,重新打开数据展示为上一次输入数据。
当点击按钮保存数据时,再次进来就展示“按钮保存的数据”。

相对于NSUserDefault,AppStorage使用上方便快捷,不用去setValue以及getValue操作。

另外还有一个SceneStorage,也是数据持久化方式,是SwiftUI接管的,但只能用在View上。

4、ObservableObject

所有遵循ObservableObject协议的class,就可以直接使用@Pulished 来修饰属性,这个属性改变后,所有使用到这个属性的地方会自动刷新UI。用法上类似于前文的@State

//放在 ContentView 范围内外都可以 最好方外面
class DelayUpdater: ObservableObject {
        @Published var value = 0
        init() {
            for i in 1...10 {
                DispatchQueue.main.asyncAfter(deadline: .now() + Double(i)) {
                    self.value += 1
                }
            }
        }
    }
@ObservedObject var updater = DelayUpdater()

var body: some View {
      Text("\(updater.value)").padding()
}

如果我们在数值改变前还想多做一些操作,我们可以使用willSetobjectWillChange来实现。

var value = 0 {
            willSet {
                //此处做另外的一些操作
                //前导的判断
                //动画
                //调用其他方法
                objectWillChange.send()
            }
        }

这种方式可创造性大一点,便于实现多种功能。

5、EnvironmentObject

顾名思义,就是将数据放到环境中去,这样可以全局地从环境中获取想要的数据。
在上面例子中新增两个View:

struct ShowValueView: View {
    
    @EnvironmentObject var updater: DelayUpdater
    
    var body: some View {
        Text("\(updater.value)")
    }
}

struct BtnView: View {
    @EnvironmentObject var updater: DelayUpdater
    
    var body: some View {
        Text("\(updater.value)")
    }
}

然后在body中展示上面两个View:

//直接可以使用let 
let updater = DelayUpdater()

var body: some View {
        VStack{
            ShowValueView().environmentObject(updater)
            BtnView().environmentObject(updater)
        }
    }

所以这两个View通过去环境中拿数据展示,此处还可以将.environmentObject(updater)放到VStack后,效果一样的,子视图都需要updater。
完整代码:

class DelayUpdater: ObservableObject {
    //@Published
    var value = 0 {
        willSet {
            //此处做另外的一些操作
            //前导的判断
            //动画
            //调用其他方法
            objectWillChange.send()
        }
    }
    
    
    init() {
        for i in 1...10 {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(i)) {
                self.value += 1
            }
        }
    }
}

struct ShowValueView: View {
    
    @EnvironmentObject var updater: DelayUpdater
    
    var body: some View {
        Text("\(updater.value)")
    }
}

struct BtnView: View {
    @EnvironmentObject var updater: DelayUpdater
    
    var body: some View {
        Text("\(updater.value)")
    }
}

struct ContentView: View {
    let updater = DelayUpdater()
    var body: some View {
        VStack{
            ShowValueView().environmentObject(updater)
            BtnView().environmentObject(updater)
        }
    }
}
6、UIKit与SwiftUI交互

例如想在SwiftUI中使用UIKit中的一个视图控制器,那么需要满足怎样的条件呢?
例如在一个SwiftUI项目中新建了一个Swift文件,新建一个UIViewController的子类,首先创建一个结构体,让此结构体遵循UIViewControllerRepresentable协议:

class SubViewController : UIViewController  {   }

struct SubVC : UIViewControllerRepresentable { 
   func makeUIViewController (context: Context) -> SubViewController{
       return SubViewController()
    }
   func uodateUIViewController (_ uiviewController: SubViewController , context: Context) {}
}

如上SubViewController就可以在SwiftUI中正常使用了。

拓展:普通.swift类型文件没有预览功能,而SwiftUI文件默认自带预览功能。如果.swift类型需要有预览功能的话,可以模仿ContentView中的方法:

struct SubViewController_Previews: PreviewProvider {
    static var previews: some View {
        SubVC()
    }
}
7、ViewModifier

类似于前端CSS视图样式,可以将控件的属性包装起来,定义一次,全局不同子控件都能使用。

struct myModifier: ViewModifier {
    func body(content: Self.Content) -> some View {
        content.foregroundColor(.red).font(Font.system(size: 20, weight: .bold)).border(.green,width: 2)
    }
}
struct ContentView: View {
    let updater = DelayUpdater()
    var body: some View {
        VStack{
            Text("Hello Lcr").modifier(myModifier())
            Text("Hello Zf").modifier(myModifier())
        }
    }
}

这样就可自定义多地方使用的ViewModifier,相同样式的View就可以使用。

8、redacted

利用redacted可以给View添加一个类似马赛克的效果。默认效果为.placeholder

public enum RedactionReason {
    case placeh
    case black
    case blur
}

struct Placeholder: ViewModifier {
    func body(content: Content) -> some View {
        content.opacity(0)
            .overlay {
                RoundedRectangle(cornerRadius: 2)
                    .fill(.black.opacity(0.16))
            }
    }
}

struct BlackV: ViewModifier {
    func body(content: Content) -> some View {
        content.overlay(Color.black)
    }
}

struct Blurred: ViewModifier {
    func body(content: Content) -> some View {
        content.blur(radius: 4)
    }
}

struct Redactable: ViewModifier {
    let reason: RedactionReason?
    
    @ViewBuilder
    func body(content: Content) -> some View {
        switch reason {
        case .placeh:
            content.modifier(Placeholder())
        case .black:
            content.modifier(BlackV())
        case .blur:
            content.modifier(Blurred())
        case nil:
            content
        }
    }
}

extension View{
    func redacted(reason:RedactionReason?) -> some View{
        self.modifier(Redactable(reason: reason))
    }
}

struct ContentView: View {
    let updater = DelayUpdater()
    var body: some View {
        VStack{
            Text("Hello Lcr").padding()
                .redacted(reason: .blur)
            Text("Hello Zf")
        }
    }
}

利用.redacted(reason: .blur)就可切换不一样的样式。

redacted

相关文章

  • SwiftUI控件

    SwiftUI控件 SwiftUI学习的内容还是很多的,但是我们只对我们项目实战内容所涵盖的知识点进行讲解,接下来...

  • SwiftUI中使用CoreData

    今天要学习的是如何在SwiftUI中使用CoreData。 知识点:1、已有项目添加CoreData2、Swift...

  • SwiftUI 实现微博项目

    WeiBo-SwiftUI 微博App项目实战 仓库代码:appke/WeiBo-SwiftUI: SwiftUI...

  • SwiftUI篇-1 项目结构

    摘要: 介绍Xcode新建的SwiftUI模版项目结构、跟普通Storyboard模版项目的差异、SwiftUI项...

  • SwiftUI:navigation进阶

    就目前而言,SwiftUI在处理NavigationLink时存在一些限制。在SwiftUI:Swift协议中,我...

  • BestWidgets 项目设计(二)代码架构设计

    目前项目使用的开发语言是Swiftui,但在使用过程中发现SwiftUI存在较多弊端,重构项目将使用Swift为主...

  • JPDesignCode for iOS15

    SwiftUI学习项目 学自于国外一个很出名的SwiftUI课程:DesignCode[https://desig...

  • 用 SwiftUI 绘制树形图

    翻译自:Drawing Trees in SwiftUI 对于一个新项目,我们需要用 SwiftUI 来绘制树形图...

  • 15个C++项目列表

    实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点。 如果你还是C++新手的话,那么...

  • swift项目进阶(持续更新...)

    1:创建项目 SwiftUI:SwiftUI是一个新型的UI布局框架,采用声明式语法,目前除了WidgetKit外...

网友评论

    本文标题:SwiftUI - 项目进阶知识点

    本文链接:https://www.haomeiwen.com/subject/gchcldtx.html