【App Dev-SwiftUI心得筆記】#2 切換頁面與模擬Loading資料

承上次初次用SwiftUI切版,這次Code越來越上手了 😎

這是的目標是將首頁的畫面弄的更完整,並且新增CategoryDetail頁面 ：Ｄ

將首頁畫面豐富&完整化

Components Used:

Zstack, Color(literal), LineGradient,

利用Zstack做出前後圖層，在底圖上用LineGradient、Color(literal)直接玄取顏色製作漸層背景

將 PopularRestaurantsView、TrendingCreators 畫面補齊

CleanCode 時間

將Code分類建立成獨立檔案放入不同的資料夾內

可以運用 PreviewProvider 建立兩個模擬器 (獨立檔案的View ＆ 整體的View)

struct PopularDestinationsView_Previews: PreviewProvider {
    static var previews: some View {
        PopularDestinationsView()
        DiscoverView()
    }
}

用 ViewModifier 建立管理重複的樣式

extension View{
    func asTile() -> some View{
        modifier(TileModifier())
    }
}

struct TileModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .background(Color(.white))
            .cornerRadius(10)
            .shadow(color: .gray, radius: 3, x: 0, y: 2)
    }
}

製作CategoryDetail 畫面

使用NavigationLink 連接畫面

製作Loading頁面

用DispatchQueue.main.asyncAfter 來模擬loading時間

新增讀取畫面元件

使用ActiveIndicatorView

加入畫面中