SwiftUI - （十九）组合视图

引言

在 SwiftUI 中，组合视图是构建用户界面的基础。SwiftUI 的声明式语法让我们能够以简洁、直观的方式组合多个视图，从而创建出复杂且高度可重用的界面组件。在实际开发中，随着应用界面的不断复杂化，能够灵活组合和管理视图变得尤为重要。无论是布局的排列、样式的复用，还是动态内容的显示，合理的视图组合都能大大提升开发效率并减少代码冗余。

在这篇文章中，我们将深入探讨如何创建和自定义 SwiftUI 中的组合视图。我们将从基本的视图组合开始，逐步引导你如何将多个视图进行灵活组合，如何将视图存储为属性进行动态更新，以及如何自定义修饰符来统一和简化界面样式。通过这些技巧，你将能够更加高效地构建响应式、可维护的用户界面。

如何创建和自定义组合视图

SwiftUI 的核心原则之一是组合，这意味着它被设计为允许我们创建许多小视图，然后将它们组合在一起以创建更大的东西。这使我们能够在大规模上重用视图，从而减少我们的工作量。更好的是，组合小子视图几乎不会带来运行时开销，因此我们可以自由使用它们。

关键是从小开始，逐步构建。例如，许多应用程序必须处理的用户数据可能如下所示：

Swift 复制代码

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

我们可以创建一个 100x100 的圆形图像视图：

Swift 复制代码

struct ProfilePicture: View {
    var imageName: String

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

创建一个任何时候都显示的EmailAddress 视图：

Swift 复制代码

struct EmailAddress: View {  
    var address: String  

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

然后组合成一个用户详细信息视图整齐地显示他们的姓名和职位以及我们刚刚创建的EmailAddress视图：

Swift 复制代码

struct UserDetails: View {
    var user: User

    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.largeTitle)
                .foregroundColor(.primary)
            Text(user.jobTitle)
            .foregroundColor(.secondary)
            EmailAddress(address: user.emailAddress)
        }
    }
}

我们还可以创建一个更大的视图来包含UserDetails以及用户头像视图。如下所示：

Swift 复制代码

struct UserView: View {  
    var user: User  

    var body: some View {  
        HStack {  
            ProfilePicture(imageName: user.profilePicture)  
            UserDetails(user: user)  
        }  
    }  
}

通过这个结构，我们现在有几种展示用户的方式：

仅显示他们的头像
仅显示他们的电子邮件地址
仅显示他们的职位详情
一次性显示所有信息

这意味着我们可以创建一个 UserView，并使用一个示例用户，它就可以正常工作：

Swift 复制代码

struct ContentView: View {  
    let user = User(name: "Paul Hudson", jobTitle: "Editor, Hacking with Swift", emailAddress: "paul@hackingwithswift.com", profilePicture: "paul-hudson")  

    var body: some View {  
        UserView(user: user)  
    }  
}

如何将文本视图组合在一起

SwiftUI 的文本视图重载了 + 操作符，因此你可以将它们组合在一起以创建新的文本视图。这在需要在视图中使用不同格式时非常有用，因为你可以将每个文本视图设置为你想要的样子，然后将它们组合在一起，形成一个单一的组合文本视图。

例如，以下代码创建三个文本视图，然后使用 + 将它们连接成一个单一的文本视图返回：

Swift 复制代码

var body: some View {  
    Text("SwiftUI ")  
        .font(.largeTitle)  
    + Text("is ")  
        .font(.headline)  
    + Text("awesome")  
        .font(.footnote)  
}

如何将视图存储为属性

如果你在一个视图中嵌套了多个视图，你可能会发现为其中一些或全部视图创建属性是非常有用的，这样可以使你的布局代码更清晰。然后你可以在视图代码中内联引用这些属性，从而帮助保持代码的清晰性。

例如，以下代码创建了两个文本视图作为属性，然后将它们放置在一个 VStack 中：

Swift 复制代码

struct ContentView: View {  
    let title = Text("Paul Hudson")  
                    .font(.largeTitle)  
    let subtitle = Text("Author")  
                    .foregroundColor(.secondary)  

    var body: some View {  
        VStack {  
            title  
            subtitle  
        }  
    }  
}

如何创建自定义修饰符

如果你发现自己不断地将相同的一组修饰符附加到一个视图------例如，给它一个背景颜色、一些内边距、特定的字体等等------那么你可以通过创建一个自定义视图修饰符来避免重复，这个修饰符封装了所有这些更改。因此，与其说'把它变成红色，使用大字体'，不如直接说'让它看起来像一个警告'，并应用一组预先定义的修饰符。

如果你想创建自己的修饰符，定义一个符合 ViewModifier 协议的结构体。该协议要求你接受一个 body(content:) 方法，该方法可以以你想要的方式转换某种内容，并返回结果。

例如，以下代码创建了一个新的 PrimaryButton 修饰符，它添加了内边距、红色背景、白色文本和大字体：

Swift 复制代码

struct PrimaryButton: ViewModifier {  
    func body(content: Content) -> some View {  
        content  
            .padding()  
            .background(Color.red)  
            .foregroundColor(Color.white)  
            .font(.largeTitle)  
    }  
}

要在你的某个视图中使用它，可以添加 .modifier(PrimaryButton()) 修饰符，如下所示：

Swift 复制代码

struct ContentView: View {  
    var body: some View {  
        Text("Hello, SwiftUI")  
            .modifier(PrimaryButton())  
    }  
}

结语

通过本文的介绍，我们了解了如何在 SwiftUI 中灵活地创建和自定义组合视图，以及如何将视图存储为属性和创建自定义修饰符。组合视图不仅可以帮助我们更高效地组织和管理界面元素，还能增强代码的可读性和可维护性。借助 SwiftUI 提供的强大功能，我们能够轻松创建出既简洁又复杂的界面，同时保持代码的高效性和一致性。

无论是在构建单个视图组件时，还是在设计整个用户界面时，掌握视图的组合和定制是每个 SwiftUI 开发者必备的技能。通过不断练习和探索，你将能够更自如地运用这些技巧，提升开发效率并打造出更精美的应用界面。

希望本文能为你提供一些有价值的思路，帮助你在 SwiftUI 开发中更加得心应手。未来，随着 SwiftUI 的不断发展和完善，组合视图和修饰符的使用将会变得更加灵活和强大。期待你在实际项目中将这些概念和技巧付诸实践，不断提升自己的开发能力。