当前位置：首页 > article >正文

SwiftUI 高级开发教程系列 - 第 2 章：组合视图与修饰符

article 2024/11/14 1:01:07

在本章中，我们将探讨如何在 SwiftUI 中创建组合视图和自定义修饰符，通过这些技巧可以大幅提升代码的可读性和可重用性，从而实现更加灵活的 UI 设计。

2.1 为什么需要组合视图

在大型应用中，往往需要复用相似的界面组件。SwiftUI 提供了灵活的视图组合方式，使开发者可以创建通用的组合视图组件，将常用的布局与功能封装到一个独立的视图中，避免重复代码，提高开发效率。

2.2 创建组合视图

假设我们需要在应用中多次使用一个带有图片和文本的卡片组件。可以将这部分视图单独封装成一个组合视图组件。

示例代码

struct CustomCardView: View {
   
    var image: String
    var title: String
    var subtitle: String

    var body: some View {
   
        VStack {
   
            Image(image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 100, height: 100)
                .clipShape(Circle())

            Text(title)
                .font(.headline)
                .foregroundColor(.primary)

            Text(subtitle)
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
        .padding()
        .background(Color(.systemBackground))
        .cornerRadius(10)
        .sh