SwiftUI基础篇ComposingViews-六虎

ComposingView

创立和组合自定义视图
将文本视图组合在一起
将视图存储为特点
创立自定义润饰符
包装自定义UIView
如何为UIViewRepresentable结构创立润饰符
如安在文本中刺进图画

概述

文章首要分享SwiftUI Modifier的学习进程，将运用事例的办法进行说明。内容深入浅出，ComposingView部分调试，不过测验代码是齐全的。假如想要运转成果，能够移步Github下载code -> github事例链接

1、创立和组合自定义视图

SwiftUI的核心之一就是组合，这意味着能够创立许多小视图，然后将他们组合以创立更大、更复杂的视图。这能够大规模的重用视图，这意味着工作量减少了。更好的情况下，组合视图运转时简直不会造成额定的开支，因此能够随意运用而不用介意功能。这儿我复刻一个完好的个人信息的比方。

Employee结构体

人物信息结构体

struct Employee {
    var name: String
    var jobTitle: String
    var emailAddress: String
    var profilePicture: String
}

ProfilePicture头像视图

App中的职工个人资料有头像图片，能够创立一个圆形的视图

struct ProfilePicture: View {
    var imageName: String
    var body: some View {
        Image(imageName)
            .resizable()
            .frame(width: 100, height: 100)
            .clipShape(Circle())
    }
}

EmailAddresss视图

struct EmailAddress: View {
    var address: String
    var body: some View {
        HStack {
            Image(systemName: "envelope")
            Text(address)
        }
    }
}

EmployeeDetail详细信息视图

struct EmployeeDetail: View {
    var employee: Employee
    var body: some View {
        VStack(alignment: .leading) {
            Text(employee.name)
                .font(.largeTitle)
                .foregroundStyle(.primary)
            Text(employee.jobTitle)
                .foregroundStyle(.secondary)
            EmailAddress(address: employee.emailAddress)
        }
    }
}

EmployeeView整合视图

创立一个更大的视图，将ProfilePicture与Employee组合，供给整体的职工信息

struct EmployeeView: View {
    var employee: Employee
    var body: some View {
        HStack {
            ProfilePicture(imageName: employee.profilePicture)
            EmployeeDetail(employee: employee)
        }
    }
}

经过别离的结构，能够用很多种办法来展现职工的信息：

只显示头像
只显示电子邮件
只显示职工具体信息
显示一切信息

更重要的是，这意味着当涉及到运用这些struct时，首要的内容视图不必忧虑如何构建这些内容的布局，由于它只包括一个大的视图，一切的这些布局都被融入到较小的视图中。这就意味着我只要在body中创立一个EmployeeView就能够了。

自定义视图的运用

struct FFCustomView: View {
    //构建数据
    let employee = Employee(name: "Meta BBLv", jobTitle: "Keep Loving, Keep Living", emailAddress: "metabblv@163.com", profilePicture: "chrysanthemum-tea-thumb")
    var body: some View {
        EmployeeView(employee: employee)
    }
}

调试成果

2、将文本视图组合在一起

SwiftUI文本视图重载了“+”运算符，能够将文本视图组合创立新的文本视图。当需要在视图中运用不同的格式时，能够使每个文本视图都不一样，然后将它们衔接在一起构成单个组合文本视图。最便利的是，当运用朗诵功能时，VoiceOver会主动将它们识别为一段文本。

struct FFCustomText: View {
    var body: some View {
        Text("SwiftUI")
            .font(.largeTitle)
        + Text("is")
            .font(.headline)
        + Text("awesome")
            .font(.footnote)
        //创立不同色彩或字体的文本
        Text("SwiftUI")
            .foregroundStyle(.red)
        + Text("is")
            .foregroundStyle(.orange)
            .fontWeight(.black)
        + Text("awesome")
            .foregroundStyle(.blue)
    }
}

调试成果

3、将视图存储为特点

假如有多个视图嵌套在另一个视图中，你可能会发现为其间一些或悉数视图创立特点很重要，能够使布局代码更容易，然后，能够在视图代码中內联引证这些特点，能够保证视图结构更清晰。

struct FFViewStoreProperties: View {
    let title = Text("metaBBLv").bold()
    let subtitle = Text("Author").foregroundStyle(.secondary)
    var body: some View {
        VStack {
            title
            subtitle
            //像这样，只需要在stack中写入特点名就能够运用了。
            //但是更便利的是能够将润饰符附加到这些特点上进行自定义操作。
            Divider()
            title
                .foregroundStyle(.red)
            subtitle
            //这不会改动标题的根底设定，只是在根底程度上附加的一种办法。
        }
    }
}

调试成果

4、创立自定义润饰符

假如发现重复的将同一组润饰符附加到视图（比方，背景色、padding、字体等等），那么能够经过创立一个润饰符来封装这些重复的润饰符。假如你想创立自己的结构，那么要恪守ViewModifier协议。并且要实现一个body(content:)函数。

//创立一个新的PrimaryLabel润饰符，增加padding、background、foregroundcolor和font等
struct PrimaryLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.red)
            .foregroundStyle(.white)
            .font(.largeTitle)
    }
}
struct FFCustomModifiers: View {
    var body: some View {
        Text("Hello, SwiftUI")
            .modifier(PrimaryLabel())
    }
}

调试成果

5、包装自定义UIView

虽然SwiftUI在供给许多UIKit的UIView子类方面做的很好，但目前还没有悉数具有，能够为想要的UIView创立自定义包装器。为UITextView创立SwiftUI包装器作为副文本编辑器的根底，分为四个步骤：

创立符合UIViewRepresentable的结构体
定义一个特点来存储正在运用的文本字符串
给它一个makeUIView()办法，范围TextView
增加updateUIView()办法，每逢TextView的数据发生更改时都会调用该办法。

struct TextView: UIViewRepresentable {
    @Binding var text: NSMutableAttributedString
    func makeUIView(context: Context) -> some UIView {
        UITextView()
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
        uiView.accessibilityAttributedLabel = text
    }
}
struct FFCustomViewWrap: View {
    @State private var text = NSMutableAttributedString(string: "")
    var body: some View {
        //在SwiftUI视图中运用TextView组件
        TextView(text: $text)
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }
}

调试成果

6、如何为UIViewRepresentable结构创立润饰符

将UIView包装在UIViewRepresentable结构中是将现有UIKit引进SwiftUI工程的办法，甚至能够增加自定义润饰符来调整视图在运转时的状况。

要实现这个需求，应该要在底层UIView上调整的一切值创立私有特点，然后创立办法来调整它们，这些办法中的每一个都能够获取SwiftUI可表示副本（而不是底层UIView），然后调整自己创立的私有特点来更新状况。

完成后，SwiftUI将保证触发updateUIView()函数，此时你将私有特点复制到UIView中以保证更新。

SearchField

创立一个UIViewRepresentable将UISearchBar桥接到SwiftUI，但你可能希望它的某些方面是可定制的，例如她的占位符文本。首要，创立可表示目标，并为其占位符增加一个额定的私有特点。

struct SearchField: UIViewRepresentable {
    @Binding var text: String
    private var placeholder = ""
    init(text: Binding<String>) {
        _text = text
    }
    func makeUIView(context: Context) -> some UIView {
        let searchBar = UISearchBar()
        searchBar.placeholder = placeholder
        return searchBar
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
        let view: UISearchBar = uiView as! UISearchBar
        view.text = text
        view.placeholder = placeholder
    }
}

创立润饰符调整私有特点

extension SearchField {
    func placeholder(_ string: String) -> SearchField {
        var view = self
        view.placeholder = string
        return view
    }
}

运用自定义的润饰符

运用placeholder()润饰符创立了一个SearchField视图，但每次单击按钮时，会随机化占位符

struct FFCreateModifiers: View {
    @State private var text = ""
    @State private var placeHolder = "Hello, wrold"
    var body: some View {
        VStack {
            SearchField(text: $text)
                .placeholder(placeHolder)
            //每次按下时随机更换占位符
            Button("Tap me") {
                placeHolder = UUID().uuidString
            }
        }
    }
}

调试成果

7、如安在文本中刺进图画

SwiftUI能够运用“+”来组合文本视图，也能够运用简略的文本初始值设定项将图画直接放到文本中。

struct FFTextInsertImage: View {
    var body: some View {
        //在Helloworld中增加一个星星icon
        Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!")
        //文本中的图画将主动调整以匹配增加的润饰符（字体、色彩等）,要用括号将链接的内容扩起来，以保证将润饰符应用于整个链接的文本。要不只能润饰最后一个Text
        (Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!"))
            .font(.largeTitle)
            .foregroundStyle(.blue)
        //假如没有增加额定的括号，则只会润饰最后一个Text("World")
        Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!")
            .font(.largeTitle)
            .foregroundStyle(.blue)
    }
}

SwiftUI基础篇ComposingViews

ComposingView

概述

1、创立和组合自定义视图

Employee结构体

ProfilePicture头像视图

EmailAddresss视图

EmployeeDetail详细信息视图

EmployeeView整合视图

自定义视图的运用

调试成果

2、将文本视图组合在一起

调试成果

3、将视图存储为特点

调试成果

4、创立自定义润饰符

调试成果

5、包装自定义UIView

调试成果

6、如何为UIViewRepresentable结构创立润饰符

SearchField

创立润饰符调整私有特点

运用自定义的润饰符

调试成果

7、如安在文本中刺进图画

调试成果

相关文章

Flutter热更新技术探索 | 京东云技术团队

KCL – 让 Kubernetes 资源清单管理更容易 [用一个自己做的编程语言能做什么？(系列文章 1)]

多线程访问基本数据类型需要加锁吗？

【更新公告】AirtestIDE更新至1.2.15版本

作者信息