整體效果

代碼實現

目錄結構

sandwichApp.swift

程序入口文件，store作為全局變量聲明在此文件，并作為參數傳入ContentView

import SwiftUI

@main
struct sandwichApp: App {
    @StateObject private var store = SandwichStore()
    var body: some Scene {
        WindowGroup {
            ContentView(store:store)
        }
    }
}

ContentView.swift

主頁面，所有功能和業務邏輯都在此頁面，是一個App的列表頁面，可以新增，移動，刪除，編輯，點擊單元格可進入詳情頁面。單元格抽象為SandwichCell。

import SwiftUI

struct ContentView: View {
    @ObservedObject var store: SandwichStore
    
    var body: some View {
        NavigationView {
            List{
                ForEach(store.sandwiches) { sandwich in
                    SandwichCell(sandwich: sandwich)
                }
                .onMove(perform:moveSandwiches(from:to:))
                .onDelete(perform: deleteSandwiches(offsets:))
                HStack {
                    Spacer()
                    Text("\(store.sandwiches.count) sandwiches")
                        .foregroundColor(.secondary)
                    Spacer()
                }
            }
            .navigationTitle("Sandwiches")
            .toolbar {
                #if os(iOS)
                EditButton()
                #endif
                // Button("Add",action: makeSandwich) //視頻中添加的button不能顯示
                
            }
            .navigationBarItems(leading: Button("Add", action:makeSandwich))
            Text("Select a Sandwich")
                .font(.largeTitle)
        }
    }
    func makeSandwich() {
        withAnimation {
            store.sandwiches.append(Sandwich(name: "Club", ingredientCount: 3))
        }
    }
    func moveSandwiches(from:IndexSet,to:Int) {
        withAnimation {
            store.sandwiches.move(fromOffsets: from, toOffset: to)
        }
    }
    func deleteSandwiches(offsets:IndexSet) {
        withAnimation {
            store.sandwiches.remove(atOffsets: offsets)
        }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(store: testStore)
            ContentView(store: testStore)
                .preferredColorScheme(.dark)
        }
    }
}

struct SandwichCell: View {
    var sandwich:Sandwich
    
    var body: some View {
        NavigationLink(
            destination: SandwichDetail(sandwich: sandwich)){
            Image(sandwich.thumbnailName)
                .cornerRadius(8)
            HStack {
                VStack(alignment:.leading) {
                    Text(sandwich.name)
                    Text("\(sandwich.ingredientCount) ingredients")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                
            }
        }
    }
}

SandwichDetail.swift

詳情頁面，圖片上支持了Tap手勢，可放大縮小。在布局上體現了SwiftUI的強大性，沒有設置絕對或相對坐標，就能把布局設計的隨心所欲，通過VStack,HStack,Spacer的運用，已經安全區的處理，很簡單的就完成了界面的布局。

import SwiftUI

struct SandwichDetail: View {
    var sandwich:Sandwich
    @State private var zoomed = false
    var body: some View {
        VStack {
            Spacer(minLength: 0)
            
            Image(sandwich.imageName)
                .resizable()
                .aspectRatio(contentMode: zoomed ? .fill : .fit)
                .onTapGesture {
                    withAnimation {
                        zoomed.toggle()
                    }
                }
            
            Spacer(minLength: 0)
            
            if(sandwich.isSpicy && !zoomed){
                HStack {
                    Spacer()
                    Label("Spicy",systemImage:"flame.fill")
                    Spacer()
                }
                .padding(.all)
                .font(Font.headline.smallCaps())
                .background(Color.red)
                .foregroundColor(Color.yellow)
                .transition(.move(edge: .bottom))
            }
                
        }
        .navigationTitle(sandwich.name)
        .edgesIgnoringSafeArea(.bottom)
    }
}

struct SandwichDetail_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            NavigationView {
                SandwichDetail(sandwich: testData[0])
            }
            NavigationView {
                SandwichDetail(sandwich: testData[1])
            }
        }
    }
}

Sandwich.swift

靜態數據文件

import Foundation

struct Sandwich:Identifiable {
    var id = UUID()
    var name:String
    var ingredientCount:Int
    var isSpicy:Bool = false
    
    var imageName:String{return name}
    var thumbnailName:String{return name + "Thumb"}
}

let testData = [
    Sandwich(name: "Club", ingredientCount: 4, isSpicy:false),
    Sandwich(name: "Pastrami on rye", ingredientCount: 4, isSpicy: true),
    Sandwich(name: "French dip", ingredientCount: 4, isSpicy:false),
    Sandwich(name: "Banh mi", ingredientCount: 4, isSpicy:true),
    Sandwich(name: "Ice cream sandwich", ingredientCount: 2, isSpicy:false),
    Sandwich(name: "Croque madame", ingredientCount: 2, isSpicy:false),
    Sandwich(name: "Hot dog", ingredientCount: 4, isSpicy:true),
    Sandwich(name: "Fluffernutter", ingredientCount: 2, isSpicy:false),
]

 

SandwichStore.swift

數據模型抽離，觀察者者模式

import Foundation
class SandwichStore: ObservableObject {
    @Published var sandwiches:[Sandwich]
    
    init(sandwiches:[Sandwich] = []) {
        self.sandwiches = sandwiches
    }
}

let testStore = SandwichStore(sandwiches: testData)

wwdc 視頻地址

 

源碼地址