詳解如何在SwiftUI中創(chuàng)建懸浮操作按鈕

更新時間：2023年10月27日 10:46:15 作者：網(wǎng)羅開發(fā)

懸浮操作按鈕（Floating Action Button, FAB）是一種在 Android 和 Material Design 中使用的 UI 元素,它用于觸發(fā)特定屏幕的主要操作,下面我們就來詳細介紹一下如何在SwiftUI中創(chuàng)建懸浮操作按鈕,需要的朋友可以參考下

前言

懸浮操作按鈕（Floating Action Button, FAB）是一種在 Android 和 Material Design 中使用的 UI 元素。它用于觸發(fā)特定屏幕的主要操作。

盡管它來自 Android，但在一些 iOS 應用中也可以看到這種模式。

以下是 Twitter 應用中懸浮操作按鈕的示例。Twitter App 在最重要的操作步驟，發(fā)布推文時使用懸浮操作按鈕。如下圖，在右下角有一個藍底中間有加號的按鈕。

下面我們就來詳細介紹一下還如何實現(xiàn)這個懸浮按鈕需求。

創(chuàng)建懸浮操作按鈕

如何 SwiftUI 創(chuàng)建一個類似 Twitter App 中的懸浮按鈕。

實現(xiàn)懸浮操作按鈕可能有很多方法，下面是我要實現(xiàn)按鈕的一些簡單需求，如下：

懸浮按鈕應該出現(xiàn)在屏幕的主要內容前面。
懸浮按鈕位于屏幕的右下角。
懸浮按鈕具有圓角形狀，并在中心具有一個圖標。
懸浮按鈕帶有一個輕微的陰影。

這是要實現(xiàn)懸浮按鈕的所有行為。讓我們逐步實現(xiàn)這些需求。

在此之前，需要先創(chuàng)建并初始化一個屏幕用來承載這個懸浮按鈕。

以下是一個簡單的列表視圖，嵌套在導航視圖和選項卡視圖中，列表中顯示了 item 加索引內容。

并在菜單欄中添加了 Home 按鈕和圖標，核心代碼如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                List(0..<100) { i in
                    Text("Item \(i)")
                }
                .navigationTitle("Home")
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
        }
    }
}

示例運行截圖如下：

懸浮按鈕出現(xiàn)在屏幕的最前方

首先，是需要實現(xiàn)需求中的第一步，懸浮按鈕應該出現(xiàn)在屏幕的主要內容前面。

要使視圖出現(xiàn)在另一個視圖前面，可以使用 ZStack 或 overlay 修飾符。

在這種情況下，選擇使用 ZStack，核心代碼如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                // 1
                ZStack {

                    List(0..<100) { i in
                        Text("Item \(i)")
                    }
                    .navigationTitle("Home")
                    // 2
                    Button {

                        // 操作
                    } label: {
                        Image(systemName: "plus")
                    }
                }
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
        }
    }
}

將內容視圖（List）包裝在 ZStack 中。將一個按鈕放在內容視圖上。

這將在列表視圖上添加一個加號圖像按鈕。

示例運行截圖如下：

懸浮按鈕位于屏幕的右下角

接著，是需要實現(xiàn)需求中的第二步，使按鈕與內容視圖對齊到右下角。

這里可以在代碼中使用 ZStack 的 alignment 參數(shù)將按鈕與右下角對齊，核心代碼如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                // 1
                ZStack(alignment: .bottomTrailing) {

                    List(0..<100) { i in
                        Text("Item \(i)")
                    }
                    .navigationTitle("Home")

                    Button {
                        // 操作
                    } label: {
                        Image(systemName: "plus")
                    }
                    // 2
                    .padding()

                }
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
        }
    }
}

ZStack(alignment: .bottomTrailing) 使較小的視圖（Button）與較大的視圖（List）底部右對齊。
我們還在按鈕周圍添加了填充，以使其不會過于靠近邊緣。

示例運行截圖如下：

將按鈕對齊到屏幕的右下角

使懸浮按鈕呈現(xiàn)圓形

接著，是需要實現(xiàn)需求中的第三步，使懸浮按鈕具有圓角形狀，并在中心具有一個圖標。

目前的情況位置是正確的，但外觀還不符合要求。

可以使用一系列修飾符使其變成圓形并加粗，核心代碼如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                ZStack(alignment: .bottomTrailing) {
                    List(0..<100) { i in
                        Text("Item \(i)")
                    }
                    .navigationTitle("Home")

                    Button {
                        // 操作
                    } label: {
                        // 1
                        Image(systemName: "plus")

                            .font(.title.weight(.semibold))

                            .padding()

                            .background(Color.pink)

                            .foregroundColor(.white)

                            .clipShape(Circle())

                    }
                    .padding()
                }
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
        }
    }
}

更改了字體樣式，添加了填充，背景色和前景色，并將其裁剪成圓形。

自定義按鈕的外觀

添加陰影

最后，是需要實現(xiàn)需求中的第四步，使懸浮按鈕帶有一個輕微的陰影。

我們通過添加陰影為其增色，使其看起來像懸浮。

SwiftUI 通過 shadow 修飾符內置了添加陰影的方法，核心代碼如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                ZStack(alignment: .bottomTrailing) {
                    List(0..<100) { i in
                        Text("Item \(i)")
                    }
                    .navigationTitle("Home")

                    Button {
                        // 操作
                    } label: {
                        Image(systemName: "plus")
                            .font(.title.weight(.semibold))
                            .padding()
                            .background(Color.pink)
                            .foregroundColor(.white)
                            .clipShape(Circle())
                            .shadow(radius: 4, x: 0, y: 4)

                    }
                    .padding()
                }
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }
        }
    }
}

示例運行截圖如下：

添加陰影