SwiftUI如何传递不同对象并根据传入内容切换视图？

问题描述 #

我有Song和Album两个不同的结构体，现有一个依赖@State var album: Album的AlbumView视图，想要复用该视图来传入Song对象。想知道能否让视图接受Album或Song任意一种类型？另外将Album设为可选类型，在视图内判断是否有值的方案是否可行？

结构体定义 #

Album结构体 #

struct Album: Identifiable {
    let id = UUID()
    let name: String
    let artist: String
    let songs: [AlbumSong]
    let releaseDate: Date
    let price: Int
    let albumImageUrl: String
    var unlocked: Bool
}

Song结构体 #

struct Song: Identifiable, Codable {
    let id = UUID()
    let title: String
    let duration: TimeInterval
    var image: String
    let artist: String
    let track: String
    let price: Int
}

当前AlbumView代码 #

struct AlbumView: View {
    @State var album: Album
    
    var body: some View {
        Text("\(album.name)").font(.system(size: 18))
    }
}

你的解决方案思路（可选类型） #

struct AlbumView: View {
    @State var album: Album?
    @State var song: Song
    
    var body: some View {
        if album != nil {
            Text("\(album!.name)")
        } else {
            Text("\(song.name)") // 注意：Song的名称属性是title而非name，此处有笔误
        }
    }
}

优化方案 #

方案1：使用枚举统一数据源（推荐） #

定义枚举封装Album和Song，让视图接收该枚举类型作为状态，通过switch分支处理不同类型的展示逻辑，逻辑清晰且避免可选类型的安全问题：

// 定义枚举封装两种媒体类型
enum MediaItem {
    case album(Album)
    case song(Song)
}

struct MediaView: View { // 建议改名更贴合功能定位
    @State var mediaItem: MediaItem
    
    var body: some View {
        switch mediaItem {
        case .album(let album):
            VStack {
                Text("\(album.name)").font(.system(size: 18))
                Text("艺术家：\(album.artist)")
                // 可添加专辑专属UI元素
            }
        case .song(let song):
            VStack {
                Text("\(song.title)").font(.system(size: 18))
                Text("艺术家：\(song.artist)")
                // 可添加歌曲专属UI元素
            }
        }
    }
}

调用示例：

// 传入专辑实例
MediaView(mediaItem: .album(yourAlbum))
// 传入歌曲实例
MediaView(mediaItem: .song(yourSong))

方案2：使用协议抽象公共属性 #

如果Album和Song存在较多公共展示属性（如艺术家、价格、名称类字段），可以定义协议抽象这些属性，让两个结构体遵守协议，视图接收协议类型，适合展示大量公共内容的场景：

// 定义协议抽象公共展示属性
protocol MediaDisplayable {
    var displayName: String { get }
    var artist: String { get }
    var price: Int { get }
}

// 让Album遵守协议
extension Album: MediaDisplayable {
    var displayName: String { name }
}

// 让Song遵守协议
extension Song: MediaDisplayable {
    var displayName: String { title }
}

struct MediaView: View {
    @State var media: MediaDisplayable
    
    var body: some View {
        VStack {
            Text(media.displayName).font(.system(size: 18))
            Text("艺术家：\(media.artist)")
            Text("价格：\(media.price)元")
            // 其他公共UI组件
        }
    }
}

修正你的可选类型方案 #

原始可选方案存在逻辑缺陷：song设为非可选类型，导致调用视图时必须传入song，哪怕要展示专辑。可以将两者都设为可选，同时用可选绑定避免强制解包：

struct AlbumView: View {
    @State var album: Album?
    @State var song: Song?
    
    var body: some View {
        Group {
            if let album = album {
                Text("\(album.name)")
            } else if let song = song {
                Text("\(song.title)")
            } else {
                Text("暂无内容")
            }
        }
    }
}

但该方案存在歧义风险（可能同时传入或都不传入数据），代码维护性不如枚举或协议方案。

内容的提问来源于stack exchange，提问作者AdamLeet