Generics/泛型, ViewBuilder/视图构造器 的使用

1. Generics 泛型的定义及使用

1.1 创建使用泛型的实例 GenericsBootcamp.swift

Swift 复制代码
import SwiftUI

struct StringModel {
    let info: String?
    func removeInfo() -> StringModel{
        StringModel(info: nil)
    }
}

struct BoolModel {
    let info: Bool?
    func removeInfo() -> BoolModel{
        BoolModel(info: nil)
    }
}

// CustomType = T
struct GenericModel<T>{
    let info: T?
    func removeInfo() -> GenericModel{
        GenericModel(info: nil)
    }
}

class GenericsViewModel: ObservableObject{
    /// 定义具体类型
    @Published var stringModel = StringModel(info: "hello, word!")
    @Published var boolModel = BoolModel(info: true)
    
    /// 定义泛型
    @Published var genericStringModel = GenericModel(info: "Hello, world!")
    @Published var genericBoolModel = GenericModel(info: true)
    
    func removeData(){
        stringModel = stringModel.removeInfo()
        boolModel = boolModel.removeInfo()
        genericStringModel = genericStringModel.removeInfo()
        genericBoolModel = genericBoolModel.removeInfo()
    }
}

/// 泛型 View
struct GenericView<T: View>: View{
    let content: T
    let title: String
    
    var body: some View{
        VStack {
            Text(title)
            content
        }
    }
}

/// 泛型
struct GenericsBootcamp: View {
    @StateObject private var viewModel: GenericsViewModel
    
    init() {
        _viewModel = StateObject(wrappedValue: GenericsViewModel())
    }
    
    var body: some View {
        VStack {
            GenericView(content: Text("custom content"), title: "new View")
            Text(viewModel.stringModel.info ?? "No data")
            Text(viewModel.boolModel.info?.description ?? "No data")
            
            Text(viewModel.genericStringModel.info ?? "No data")
            Text(viewModel.genericBoolModel.info?.description ?? "No data")
        }.onTapGesture {
            viewModel.removeData()
        }
    }
}

struct GenericsBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        GenericsBootcamp()
    }
}

1.2 效果图:

2. ViewBuilder 视图构造器的定义及使用

2.1 创建视图构造器的实例 ViewBuilderBootcamp.swift

Swift 复制代码
import SwiftUI

/// 常规标题视图
struct HeaderViewRegular: View{
    let title: String
    let description: String?
    let iconName: String?
    
    var body: some View{
        VStack(alignment: .leading) {
            Text(title)
                .font(.largeTitle)
                .fontWeight(.semibold)
            
            if let description = description{
                Text(description)
                    .font(.callout)
            }
            
            if let iconName = iconName{
                Image(systemName: iconName)
            }
            
            RoundedRectangle(cornerRadius: 5)
                .frame(height: 2)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding()
    }
}
/// 通用的标题视图
struct HeaderViewGeneric<Content: View>: View {
    let title: String
    // 泛型,可以为任何类型
    let content: Content
    
    init(title: String, @ViewBuilder content: () -> Content) {
        self.title = title
        self.content = content()
    }
    
    var body: some View{
        VStack(alignment: .leading) {
            Text(title)
                .font(.largeTitle)
                .fontWeight(.semibold)
            
            content
            
            RoundedRectangle(cornerRadius: 5)
                .frame(height: 2)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding()
    }
}

/// 自定义水平堆栈视图
struct CustomHStack<Content: View>:View{
    let content: Content
    
    init(@ViewBuilder content: () -> Content){
        self.content = content()
    }
    
    var body: some View{
        HStack {
            content
        }
    }
}

/// 视图构造器
struct ViewBuilderBootcamp: View {
    var body: some View {
        VStack {
            HeaderViewRegular(title: "New Title", description: "Hello", iconName: "heart.fill")
            HeaderViewRegular(title: "Another title", description: nil, iconName: nil)
            HeaderViewGeneric(title: "Generic 3") {
                VStack {
                    Text("Hello, world!")
                    Image(systemName: "bolt.fill")
                }
            }
            
            CustomHStack {
                Text("Hi")
                Text("Wo")
            }
            
            HStack {
                Text("Hi")
                Text("Wo")
            }
            Spacer()
        }
    }
}

/// 本地视图构造器
struct LocalViewBuilder: View{
    
    enum ViewType {
        case one, two, three
    }
    
    let type: ViewType
    
    /// 视图构造器
    var body: some View {
        VStack {
            headerSection
        }
    }
    
    /// 标题部分 头部分
    @ViewBuilder private var headerSection: some View{
        switch type {
        case .one:
            oneView
        case .two:
            twoView
        case .three:
            threeView
        }
    }
    
    /// 视图一
    @ViewBuilder private var oneView: some View{
        Text("One!")
    }
    
    /// 视图二
    private var twoView: some View{
        VStack {
            Text("Two 2")
            Image(systemName: "heart.fill")
        }
    }
    
    /// 视图三
    private var threeView: some View{
        Image(systemName: "heart.fill")
    }
}

struct ViewBuilderBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        //ViewBuilderBootcamp()
        LocalViewBuilder(type: .one)
    }
}

2.2 效果图:

相关推荐
点金石游戏出海2 小时前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
90后的晨仔4 小时前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger244805 小时前
谈一谈iOS线程管理
ios·objective-c
Digitally5 小时前
如何将大型视频文件从 iPhone 传输到 PC
ios·iphone
梅名智5 小时前
IOS 蓝牙连接
macos·ios·cocoa
ui设计前端开发老司机7 小时前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX8 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
美狐美颜sdk13 小时前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
恋猫de小郭17 小时前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin
Clair-Sean18 小时前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux