SwiftUI 2020年WWDC演示示例

整体效果

代码实现

文件目录

SandwichesApp.swift

import SwiftUI

@main
struct SandwichesApp: App {
	// 定义一个私有的状态对象 store
    @StateObject private var store = SandwichStore()

    var body: some Scene {
        WindowGroup {
        	// 将store传递给列表页
            ContentView(store: store)
        }
    }
}

SandwichStore.swift

将模型数据抽离出来观察其数据变化

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

let testStore = SandwichStore(sandwiches: testData)

ContentView.swift

列表效果的实现

import SwiftUI

struct ContentView: View {
// 定义一个观察对象 store
    @ObservedObject var store: SandwichStore
        
    var body: some View {
        NavigationView{
            // 列表的实现
            List {
                ForEach(store.sandwiches) { sandwich in
                    SandwichCell(sandwich: sandwich)
                }
                .onMove (perform: moveSandwiches)
                .onDelete(perform: deleteSandwiches)
                
                HStack {
                    Spacer()
                    Text("\(store.sandwiches.count) Sandwiches")
                    Spacer()
                }
            }
            .navigationTitle("Sandwiches")
//            .toolbar { // 跟发布会演示的效果不同
//                #if os(iOS)
//                EditButton()
//                #endif
//                Button("Add", action: makeSandwich)
//            }	
			// 先用旧的实现方式显示导航栏功能按键
            .navigationBarItems(leading: EditButton(),
                                trailing: Button("Add", action: makeSandwich))
            Text("Select a sandwich")
                .font(.largeTitle)
        }
        
    }

    // 添加
    func makeSandwich() {
        withAnimation {
            store.sandwiches.append(Sandwich(name: "Patty melt", 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)
                .environment(\.sizeCategory, .extraExtraExtraLarge)
            ContentView(store: testStore)
                .preferredColorScheme(.dark)
                .environment(\.sizeCategory, .extraExtraExtraLarge)
            ContentView(store: testStore)
                .preferredColorScheme(.dark)
                .environment(\.sizeCategory, .extraExtraExtraLarge)
                .environment(\.layoutDirection, .rightToLeft)
                .environment(\.locale, Locale(identifier: "ar"))

        }
    }
}

struct SandwichCell: View {
	// 接收cell传递来的数据
    var sandwich: Sandwich
    
    var body: some View {
        NavigationLink(destination: SandwichDetail(sandwich: sandwich)){
            Image(sandwich.thumbnailName)
                .cornerRadius(8.0)
            
            VStack(alignment: .leading) {
                Text(sandwich.name)
                Text("\(sandwich.ingredientCount) ingredients")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

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: 3, isSpicy: false),
    Sandwich(name: "Bánh mi", ingredientCount: 5, isSpicy: true),
    Sandwich(name: "Ice cream sandwich", ingredientCount: 2, isSpicy: false),
    Sandwich(name: "Croque madame", ingredientCount: 4, isSpicy: false),
    Sandwich(name: "Hot dog", ingredientCount: 2, isSpicy: true),
    Sandwich(name: "Fluffernutter", ingredientCount: 2, isSpicy: false),
    Sandwich(name: "Avocado toast", ingredientCount: 3, isSpicy: true),
    Sandwich(name: "Gua bao", ingredientCount: 3, isSpicy: true),
]

SandwichDetail.swift

显示的详情页

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()
                    Image(systemName: "flame.fill")
                    Text("Spicy")
                    Spacer()
                }
                .padding(.all)
                .font(Font.headline.smallCaps())
                .background(Color.red)
                .foregroundColor(.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])
            }
        }
    }
}

源码下载