快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

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

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

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

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

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

以下是一個(gè)簡單的列表視圖，嵌套在導(dǎo)航視圖和選項(xiàng)卡視圖中，列表中顯示了 item 加索引內(nèi)容。

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

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

示例運(yùn)行截圖如下：

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

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

要使視圖出現(xiàn)在另一個(gè)視圖前面，可以使用 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")
            }
        }
    }
}

將內(nèi)容視圖（List）包裝在 ZStack 中。將一個(gè)按鈕放在內(nèi)容視圖上。

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

示例運(yùn)行截圖如下：

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

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

這里可以在代碼中使用 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）底部右對齊。
我們還在按鈕周圍添加了填充，以使其不會過于靠近邊緣。

示例運(yùn)行截圖如下：

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

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

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

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

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

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")
            }
        }
    }
}

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

自定義按鈕的外觀

添加陰影

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

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

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

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")
            }
        }
    }
}

示例運(yùn)行截圖如下：

添加陰影