引言

SwiftUI 是 Apple 在 WWDC 2019 推出的強大框架，使開發者能夠輕鬆地創建原生的 iOS、macOS、tvOS 和 watchOS 應用程式。隨著 SwiftUI 的不斷更新，使用導航欄的方式也隨之改進。本文將提供一個全面的指南，幫助您在 SwiftUI 中正確使用導航欄，並包含2025年的最新語法和最佳實踐。

建立導航欄

在 SwiftUI 中，導航欄是一個重要的界面組件，能幫助使用者在應用程式內部進行導航。要建立導航欄，首先需要使用 `NavigationView`，並將所有導航元素放置在此視圖中。

struct ContentView: View {
    var body: some View {
        NavigationView {
            // 這裡放置導航元素
        }
    }
}

使用 NavigationLink 建立導航按鈕

接著，您可以使用 `NavigationLink` 來創建導航按鈕，當使用者點擊按鈕時，將轉到目標視圖。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("目標視圖")) {
                Text("點擊這裡")
            }
        }
    }
}

在上述程式碼中，當使用者點擊「點擊這裡」按鈕時，會跳轉到顯示「目標視圖」的頁面。

設定導航欄標題

除了導航按鈕，您還可以使用 `.navigationBarTitle` 方法來設定導航欄的標題。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("目標視圖")) {
                Text("點擊這裡")
            }
            .navigationBarTitle("導航欄標題", displayMode: .inline)
        }
    }
}

這段程式碼中，我們設定了導航欄的標題為「導航欄標題」，並選擇了內嵌顯示模式。

錯誤排除與最佳實踐

在使用導航欄時，開發者可能會遇到一些常見問題，如導航不正常或標題顯示錯誤。以下是一些常見的錯誤排除步驟：

1. **導航鏈接未正確設置**：確保所有的 `NavigationLink` 都正確指向目標視圖。
2. **視圖層級關係**：確保所有導航元素都位於 `NavigationView` 內。
3. **SwiftUI 更新**：隨著 SwiftUI 的更新，某些方法可能會有所變化，請參考最新的 SwiftUI 文檔。

延伸應用

導航欄不僅可以用於基本導航，還可以進行進階應用，如：

– **自定義導航按鈕**：您可以自定義 `NavigationLink` 的外觀來符合應用的主題。
– **多層導航**：在一個視圖中嵌套多個 `NavigationView`，實現多層級的導航結構。

結論

本文介紹了如何在 SwiftUI 中使用導航欄，包括建立導航欄、創建導航按鈕、設置導航標題以及常見問題的排除和最佳實踐。理解這些基本概念將幫助您打造更流暢的用戶體驗。

Q&A（常見問題解答）

1. 如何在 SwiftUI 中使用自定義導航按鈕？

您可以透過自定義視圖來替代 `NavigationLink` 的標準文本，並將其包裹在 `NavigationLink` 中，以達到自定義效果。

2. SwiftUI 中導航欄的標題可以修改嗎？

是的，您可以使用 `.navigationBarTitle` 方法來修改導航欄的標題，並且可以選擇顯示模式。

3. 如果導航欄不顯示，該怎麼辦？

檢查您的視圖是否被正確包裹在 `NavigationView` 中，並確保所有導航元素都是在導航視圖的範圍內。

在 SwiftUI 中使用導航欄
—

Categorized in:

iOSswift

Tagged in:

,