Xcode Libraryにカスタムビューとモディファイアを追加する

LibraryContent.swift

import SwiftUI

/// 犬の種類
enum Dog {
    /// 秋田犬
    case akitainu
    /// 甲斐犬
    case kaiken
    
    /// 名前
    var name: String {
        switch self {
        case .akitainu:
            return "秋田犬"
        case .kaiken:
            return "甲斐犬"
        }
    }
    
    /// 画像
    var image: Image {
        switch self {
        case .akitainu:
            return .init("dog_akitainu")
        case .kaiken:
            return .init("dog_kaiken")
        }
    }
}

struct ContentView: View {
    // 犬一覧
    var dogs: [Dog] = [.akitainu, .kaiken]
    
    var body: some View {
        List(dogs, id: \.self) { dog in
            DogRowView(dog: dog)
        } // List
    } // body
}

struct ContentView_Previews: PreviewProvider {
    /// 犬一覧
    static let dogs: [Dog] = [.akitainu, .kaiken]
    
    static var previews: some View {
        ContentView(dogs: dogs)
    }
}

/// 犬の行ビュー
struct DogRowView: View {
    /// 犬の種類
    let dog: Dog
    /// お気に入り
    var favorite: Bool = false
    /// 画像サイズ
    var size: CGFloat = 80.0
    
    var body: some View {
        HStack {
            dog.image
                .resizedToFit(width: size, height: size)
            //                .resizable()
            //                .aspectRatio(contentMode: .fit)
            //                .frame(height: 80)
            VStack(alignment: .leading) {
                Text(dog.name)
                    .font(.headline)
                    .padding(8)
                HStack {
                    Spacer()
                    Button(action: {}) {
                        HStack {
                            Image(systemName: favorite ? "star.fill" : "star")
                            Text("お気に入り")
                        } // HStack
                    } // Button
                    .padding()
                    .foregroundColor(Color(UIColor.label))
                    .background(Color(UIColor.systemBackground))
                    .cornerRadius(5)
                } // HStack
            } // VStack
        } // HStack
        .padding()
        .background(Color(UIColor.lightGray))
        .cornerRadius(12)
    }
}

/// Imageの拡張
extension Image {
    /// アスペクト比を保ちつつ画像を特定のサイズに変更
    func resizedToFit(width: CGFloat, height: CGFloat) -> some View {
        return self
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: width, height: height)
    }
}

/// カスタムライブラリーコンテンツ
struct LibraryContent: LibraryContentProvider {
    
    // カスタムビュー
    
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            DogRowView(dog: .akitainu),
            category: .control // カテゴリーを指定
        )
        
        LibraryItem(
            DogRowView(dog: .akitainu, favorite: false),
            title: "Dog Row View With Favorite", // タイトルを指定
            category: .control // カテゴリーを指定
        )
    }
    
    // カスタムモディファイア
    
    @LibraryContentBuilder
    func modifiers(base: Image) -> [LibraryItem] {
        LibraryItem(
            base
                .resizedToFit(width: 80.0, height: 80.0),
                category: .effect // カテゴリーを指定
        )
    }
    
}