MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

SwiftUI自定义视图组件

2021-07-147.1k 阅读

SwiftUI自定义视图组件基础

理解视图构建

在SwiftUI中，视图是构建用户界面的基础单元。一个视图描述了界面的一部分外观和行为。SwiftUI提供了许多内置视图，如Text、Button、Image等。但在实际开发中，我们常常需要创建自定义视图来满足特定的设计和功能需求。

视图本质上是一种结构体，它遵循View协议。View协议要求实现一个body属性，这个属性返回另一个视图。这就形成了一种视图嵌套的层级结构，就像搭积木一样，通过组合不同的视图来构建复杂的界面。

例如，一个简单的自定义视图可能是这样：

struct MySimpleView: View {
    var body: some View {
        Text("这是我的自定义视图")
           .padding()
    }
}

在这个例子中，MySimpleView结构体遵循View协议，body属性返回一个带有内边距的Text视图。

自定义视图的参数化

为了让自定义视图更加灵活和通用，我们可以给它添加参数。这些参数可以控制视图的外观、内容或行为。

比如，我们创建一个可以显示不同文本的自定义视图：

struct CustomTextLabel: View {
    let text: String
    let fontSize: CGFloat

    var body: some View {
        Text(text)
           .font(.system(size: fontSize))
           .padding()
    }
}

这里，CustomTextLabel有两个参数text和fontSize。通过传入不同的值，我们可以创建出显示不同文本和字号的视图实例：

CustomTextLabel(text: "大标题", fontSize: 30)
CustomTextLabel(text: "小标题", fontSize: 18)

布局和约束在自定义视图中的应用

基本布局原理

SwiftUI使用一种声明式的布局系统。当构建自定义视图时，理解布局原理至关重要。视图的布局分为两个阶段：测量和放置。

在测量阶段，视图会计算自己的大小需求。例如，Text视图会根据文本内容和字体大小来确定自己需要的宽度和高度。而在放置阶段，父视图会根据子视图的大小需求和布局规则，将子视图放置在合适的位置。

SwiftUI提供了一些布局相关的修饰符，如padding、frame等，来帮助我们控制视图的布局。比如，padding修饰符会在视图周围添加一定的内边距，从而影响视图在父视图中的位置和大小。

自定义布局

有时候，内置的布局方式无法满足需求，这就需要我们自定义布局。SwiftUI提供了layout协议来实现自定义布局。

假设我们要创建一个水平排列的视图组，并且每个子视图宽度相同：

struct EqualWidthHStack: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        var width: CGFloat = 0
        var height: CGFloat = 0
        for subview in subviews {
            let size = subview.sizeThatFits(proposal)
            width += size.width
            height = max(height, size.height)
        }
        return CGSize(width: width, height: height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let count = subviews.count
        guard count > 0 else { return }
        let subviewWidth = bounds.width / CGFloat(count)
        var x = bounds.minX
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(ProposedViewSize(width: subviewWidth, height: bounds.height))
            subview.place(at: CGPoint(x: x, y: bounds.minY), anchor:.topLeading, proposal: ProposedViewSize(width: subviewWidth, height: subviewSize.height))
            x += subviewWidth
        }
    }
}

extension View {
    func equalWidthHStack() -> some View {
        EqualWidthHStack { self }
    }
}

使用时：

VStack {
    Text("子视图1").equalWidthHStack()
    Text("子视图2").equalWidthHStack()
    Text("子视图3").equalWidthHStack()
}

在这个例子中，EqualWidthHStack结构体遵循Layout协议。sizeThatFits方法计算整个视图组的大小，placeSubviews方法将子视图水平排列，并且每个子视图宽度相同。

自定义视图的交互

处理用户输入

为了使自定义视图能够响应用户操作，我们需要添加交互逻辑。SwiftUI提供了一些手势相关的修饰符，如onTapGesture、onLongPressGesture等。

比如，我们创建一个可以点击的自定义视图：

struct ClickableView: View {
    var body: some View {
        Rectangle()
           .fill(Color.blue)
           .frame(width: 200, height: 100)
           .onTapGesture {
                print("视图被点击了")
            }
    }
}

这里，Rectangle视图添加了onTapGesture修饰符，当用户点击该视图时，会在控制台打印出信息。

状态管理与交互

在很多情况下，视图的交互会导致状态的变化。SwiftUI使用@State和@Binding来管理视图状态。

假设我们有一个自定义的开关视图：

struct CustomSwitch: View {
    @Binding var isOn: Bool

    var body: some View {
        HStack {
            Text(isOn? "开" : "关")
            Toggle("", isOn: $isOn)
        }
       .padding()
    }
}

使用时：

struct ContentView: View {
    @State private var switchIsOn = false

    var body: some View {
        CustomSwitch(isOn: $switchIsOn)
    }
}

在这个例子中，CustomSwitch视图接受一个@Binding类型的isOn参数，用于控制开关的状态。ContentView中的@State变量switchIsOn与CustomSwitch中的isOn绑定，当用户操作开关时，状态会同步变化。

自定义视图的样式和外观

应用样式

SwiftUI允许我们通过修饰符来应用样式到视图上。对于自定义视图，同样可以使用这些修饰符来统一外观。

比如，我们创建一个具有特定样式的按钮视图：

struct CustomButton: View {
    var body: some View {
        Text("点击我")
           .padding()
           .background(Color.blue)
           .foregroundColor(.white)
           .cornerRadius(10)
    }
}

这里，Text视图通过一系列修饰符实现了蓝色背景、白色文字和圆角的样式。

创建自定义样式

除了使用内置的样式修饰符，我们还可以创建自己的样式。这可以通过扩展View协议来实现。

例如，我们定义一种通用的卡片样式：

extension View {
    func cardStyle() -> some View {
        self
           .padding()
           .background(Color.white)
           .cornerRadius(10)
           .shadow(radius: 5)
    }
}

使用时：

struct CardContentView: View {
    var body: some View {
        Text("卡片内容")
           .cardStyle()
    }
}

这样，任何视图只要调用cardStyle方法，就会应用上我们定义的卡片样式。

自定义视图的动画效果

基本动画

SwiftUI为视图提供了强大的动画支持。我们可以通过animation修饰符为自定义视图添加动画效果。

比如，我们创建一个可以淡入淡出的自定义视图：

struct FadeInOutView: View {
    @State private var isVisible = true

    var body: some View {
        if isVisible {
            Text("可见内容")
               .opacity(isVisible? 1 : 0)
               .animation(.easeInOut(duration: 1), value: isVisible)
        }
        Button("切换可见性") {
            isVisible.toggle()
        }
    }
}

在这个例子中，Text视图的opacity属性根据isVisible状态变化，并且添加了一个持续时间为1秒的缓入缓出动画。

复杂动画和过渡效果

对于更复杂的动画和过渡效果，SwiftUI提供了transition修饰符。

假设我们要创建一个具有滑动过渡效果的自定义视图：

struct SlideInView: View {
    @State private var isPresented = false

    var body: some View {
        VStack {
            if isPresented {
                Text("滑动进来的内容")
                   .transition(.slide)
                   .animation(.easeInOut(duration: 1))
            }
            Button("显示内容") {
                isPresented.toggle()
            }
        }
    }
}

这里，当isPresented状态变化时，Text视图会以滑动的过渡效果出现或消失，并且伴有缓入缓出的动画。

自定义视图的组合与复用

组合多个自定义视图

在实际开发中，我们经常需要将多个自定义视图组合在一起，形成更复杂的组件。

比如，我们创建一个包含标题和内容的自定义卡片视图：

struct CustomCard: View {
    let title: String
    let content: String

    var body: some View {
        VStack {
            Text(title)
               .font(.headline)
            Text(content)
        }
       .cardStyle()
    }
}

这里，CustomCard视图组合了两个Text视图，并应用了之前定义的cardStyle样式。

复用自定义视图

自定义视图的一个重要优势就是复用。我们可以在不同的界面中使用同一个自定义视图，提高代码的可维护性和开发效率。

例如，我们在多个地方使用之前创建的CustomButton视图：

struct MainContentView: View {
    var body: some View {
        VStack {
            CustomButton()
            CustomButton()
        }
    }
}

通过复用，我们避免了重复编写相似的代码，同时保证了界面风格的一致性。

自定义视图与环境

环境值的使用

SwiftUI的环境机制允许我们在视图层级中传递数据。自定义视图可以读取和利用环境值。

比如，我们可以获取系统的颜色方案：

struct EnvironmentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text(colorScheme ==.dark? "黑暗模式" : "明亮模式")
    }
}

这里，@Environment属性包装器获取了系统的颜色方案环境值，并根据该值显示不同的文本。

自定义环境值

除了使用内置的环境值，我们还可以自定义环境值。这对于在视图层级中传递特定的数据非常有用。

假设我们要在应用中传递一个全局的用户信息：

struct User {
    let name: String
}

extension EnvironmentValues {
    var currentUser: User? {
        get { self[UserKey.self] }
        set { self[UserKey.self] = newValue }
    }
}

private struct UserKey: EnvironmentKey {
    static let defaultValue: User? = nil
}

struct UserInfoView: View {
    @Environment(\.currentUser) var user

    var body: some View {
        if let user = user {
            Text("当前用户: \(user.name)")
        } else {
            Text("未登录")
        }
    }
}

使用时：

struct ContentView: View {
    let user = User(name: "张三")

    var body: some View {
        UserInfoView()
           .environment(\.currentUser, user)
    }
}

在这个例子中，我们自定义了一个currentUser环境值，并在ContentView中设置该值，UserInfoView视图可以读取这个环境值并显示相应的信息。

自定义视图的性能优化

视图重绘分析

在开发自定义视图时，性能是一个重要的考虑因素。SwiftUI会在状态变化时重绘视图。我们需要分析哪些状态变化会导致不必要的重绘。

比如，如果一个自定义视图的body属性依赖于一个频繁变化但不影响视图外观的变量，就可能导致不必要的重绘。

struct UnoptimizedView: View {
    @State private var counter = 0

    var body: some View {
        Text("文本内容")
           .onAppear {
                Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
                    counter += 1
                }
            }
    }
}

在这个例子中，counter的变化不会影响Text视图的外观，但由于body属性依赖于counter，每次counter变化都会导致视图重绘。

优化策略

为了优化性能，我们可以使用@ViewBuilder和@MainActor等工具。

@ViewBuilder可以让我们更灵活地构建视图，避免不必要的计算。例如：

@ViewBuilder
func conditionalView(isVisible: Bool) -> some View {
    if isVisible {
        Text("可见视图")
    } else {
        EmptyView()
    }
}

@MainActor用于确保视图更新在主线程上进行，避免多线程问题导致的性能问题和界面异常。

另外，我们可以使用@StateObject和@ObservedObject来管理视图的数据，确保数据变化时只触发必要的视图更新。

class UserViewModel: ObservableObject {
    @Published var name: String

    init(name: String) {
        self.name = name
    }
}

struct UserView: View {
    @StateObject var viewModel: UserViewModel

    var body: some View {
        Text(viewModel.name)
    }
}

在这个例子中，UserView使用@StateObject来绑定UserViewModel，只有当viewModel中的name属性变化时，UserView才会更新，提高了性能。

通过以上对SwiftUI自定义视图组件的深入探讨，我们可以创建出功能丰富、性能良好且具有复用性的自定义视图，为SwiftUI应用开发提供强大的支持。无论是简单的界面元素还是复杂的交互组件，都可以通过合理运用这些知识来实现。