码迷,mamicode.com
首页 > 编程语言 > 详细

SwiftUI 官方教程(六)

时间:2019-06-16 12:06:07      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:img   实时   调用   building   wiki   wan   family   src   nbsp   

6. 在列表和详情之间设置导航

虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面。SwiftUI教程

把 list 嵌入一个 NavigationView 中,并把每个 row 嵌套在一个 NavigationButton 中来设置到目标 view 的转场,这样 list 就具有了导航功能。

技术图片

6.1 把自动创建地标的 list 嵌入到一个 NavigationView 中。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

技术图片

调用 navigationBarTitle(_:) 方法来设置 list 显示时导航栏的标题。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

技术图片

6.3 在 list 的闭包中,把返回的 row 包装在一个 NavigationButton 中,并把 LandmarkDetailview 作为目标。SwiftUI教程

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail()) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

技术图片

6.4 切换到实时模式后可以直接在预览中尝试导航功能。单击 Live Preview 按钮,然后点击地标来访问详情页面。

技术图片

SwiftUI 官方教程(六)

标签:img   实时   调用   building   wiki   wan   family   src   nbsp   

原文地址:https://www.cnblogs.com/suibian1/p/11030899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!