iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Mobile Development

程式初學就來點swift吧!教你掌握整個蘋果生態圈!系列 第 20

Day 20 - SwiftUI開發學習4(切換分頁)

今天我們運用NavigationView去做切換視窗。

正文

建立新的頁面

因為我們之前都是在主頁去做開發,所以我們先在旁邊開啟新的視窗。

點擊新文件。

接著選擇新建swiftui。

創建NavigationView

NavigationView的裡面必須創建NavigationLink。

而NavigationLink裡面再去創建目的地,以及按下去的東西。

Destination也就是要填入你要切換的頁面

NavigationView {
                    VStack {
                        NavigationLink(
                            destination: c2(),
                            label: {
                                Text("跳頁")
                            })
                    }
                    .navigationTitle("主頁")
        }

非常重要的一點 誰包誰?

我前面有使用ScrollView,但它不能包住NavigationView,否則會跑出兩個Preview!

這邊應該是NavigationView包住ScrollView

然後我們再把標題加回去。

label改成圖片

接下來我們學著把label改成圖片。

首先一樣去內建庫找你像要的圖。

以下為第二個頁面的程式:

這樣我們點擊圖片也可以跳頁了。

但這邊還是有一點問題,如果你還有其他頁面,會變成以下畫面:

這是因為你又多創建了一個NavigatinView。

底下我們來解決這個問題。

多層頁面

接下來我們試著創建多組頁面試看看,並且解決上面的問題。

然後我們創建c3頁面。

將c2頁面的NavigationView刪除。

這樣c3頁面就完全正常啦!

從c1直接叫c3

我們接添加一組NavigationLink就可以了,不用添加NavigationView。

截圖 2021-08-24 下午4.07.14.png

總結

今天學了切換頁面,個人覺得從今天的課程開始就很有App的模樣了,越來越有感覺了!

今天寫完才發現我複製下面圖案時時把switch連同複製上去了,這邊說個抱歉,不過不會影響程式。


上一篇
Day 19 - SwiftUI開發學習3(Stack 、 Scroll View、Stepper)
下一篇
Day 21 - SwiftUI開發學習5(文字填入)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30

尚未有邦友留言

立即登入留言