iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Mobile Development

[初探] 用 SwiftUI - 打造一個自助洗衣應用系列 第 14

第十四日、SwiftUI - 頁面的種種事情之2 篇 (NavigationView )

  • 分享至 

  • xImage
  •  

昨天提到了 Tabview
今天就來提一下 NavigationView
在使用 NavigationView 自帶的特徵為
https://ithelp.ithome.com.tw/upload/images/20200914/20130099v8W0PpncPc.png
或是
https://ithelp.ithome.com.tw/upload/images/20200914/20130099sHn9kB7LX3.png

他會帶出一個 Title 欄位在上面
當然你可以使用

navigationBarTitle

這是能控制這個欄位的方法
內有 displayMode 可以對顯示模式做出不同的調整
查看

這是 Demo:

struct MemberView: View {
   let items = ["沙拉", "湯姆", "捷克", "小呆",
                "大呆"]
   var body: some View {
        NavigationView {
             List(items, id: \.self) {
                 Text($0)
             }
            .navigationBarTitle(Text("顧客名單"), displayMode: .inline)
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20200914/20130099ymssnnn22e.png

那我們在提到如何換頁面

這時就會用到 NavigationLink

struct DemoView: View {
    var body: some View {
        NavigationView() {
            NavigationLink(   //這裡你可以對其連結去修改
                "第一頁",
                destination: Text("第二頁") //這裡是另外的頁面,你可以放入不同的東西
                .navigationBarTitle("2")
            )
                .navigationBarTitle("標題")
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20200914/20130099I1jIhWP6gx.png
https://ithelp.ithome.com.tw/upload/images/20200914/20130099tMg2P3v3xm.png

透過以上的變化你就能簡單地去切換頁面
這功能像是我在搜尋地圖這個功能時會使用到
之後在做 map 部分的時候會提到的


上一篇
第十三日、SwiftUI - 頁面的種種事情之1 篇 (Tabview )
下一篇
第十五日、途中
系列文
[初探] 用 SwiftUI - 打造一個自助洗衣應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言