SwiftUI 2.0 製作個側邊欄基於GeometryReader和Lazy(教程含源碼)

本文價值與收穫

看完本文後，您將能夠作出下面的界面

看完本文您將掌握的技能

• 掌握GeometryReader的基礎使用
• 掌握Lazy組件基礎使用
• 實現側邊欄效果

代碼

import SwiftUI

struct ContentView: View {
    var body: some View {
        SideMenuTest()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct SideMenuTest: View {
    
    @State var selection: Int = 0
    
    var body: some View {
        ZStack {
            Color.gray.opacity(0.8)
            SideMenu(selected: $selection, options: ["源碼", "教程", "文檔"])
        }.edgesIgnoringSafeArea(.vertical)
    }
}

struct SideMenu: View {
    
    @Binding var selected: Int
    var options: [String]