蘋果官方網站SwiftUI教程02

蘋果官方網站SwiftUI教程02：

課程地址

素材地址：官方地址

Building Lists and Navigation

• 給app添加list展示View和界面跳轉功能
  • 創建模型文件Landmark.swift
  • 導入landmarkData.json文件，另外寫好json轉換成類的文件：可以參考我項目中DataUtil.swfit文件 地址：url
  • 上個項目中的contenView改名爲LandmarkDetail文件
  • 新建LandmarkRow.swift.來顯示單個row
  • 如果定義變量，那麼previews中就需要向裏面傳值
  • 通過.previewLayout(.fix(width:xx,height:xx))修飾previews
  • Group{}可以顯示多組row
  • 創建一個Landmark list
  • List{}or list(數據源){} 數據源需要帶唯一的參數id-path
  • 如果數據源遵循 Identifiable協議，那麼List數據源不需要帶id參數,需要有id屬性才能遵循此協議
  • Set Up Navigation Between List and Detail
  • NavigationView{} 嵌套 list
  • .navigationBarTitle(Text(“Landmarks”))添加修飾器，添加titie
  • 使用NavigationLink來進行界面跳轉，navigationLink（跳轉的目的地）{//響應點擊的控件}
  • 傳遞數據到子視圖：將一些之前hard code 的數據使用變量來代替，通過調用時傳入landmark數據，來動態更新。
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eof07z2q-1581343800635)(img/SwiftUI02/%20%20-%20.png)]
  • 修改模擬器啓動的第一個頁面：
  • 修改動態的previews，設置多個previews，和previews的機型：

// 在 previews屬性中
    static var previews: some View {
        //        LandmarkList()
        //        .previewDevice(PreviewDevice(rawValue: "iPhone SE"))
        
        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
            .previewDisplayName(deviceName)// 添加設備名字
            // You can experiment with different devices to compare the renderings of your views, all from the canvas.
        }
    }