如何在 SwiftUI 中创建悬浮操作按钮

前言

悬浮操作按钮（Floating Action Button, FAB）是一种在 Android 和 Material Design 中运用的 UI 元素。它用于触发特定屏幕的主要操作。

尽管它来自 Android，但在一些 iOS 运用中也可以看到这种模式。

以下是 Twitter 运用中悬浮操作按钮的示例。Twitter App 在最重要的操作进程，发布推文时运用悬浮操作按钮。如下图，在右下角有一个蓝底中间有加号的按钮。

下面咱们就来具体介绍一下还怎么完结这个悬浮按钮需求。

创立悬浮操作按钮

怎么 SwiftUI 创立一个相似 Twitter App 中的悬浮按钮。

完结悬浮操作按钮可能有很多办法，下面是我要完结按钮的一些简单需求，如下：

• 悬浮按钮应该出现在屏幕的主要内容前面。
• 悬浮按钮坐落屏幕的右下角。
• 悬浮按钮具有圆角形状，并在中心具有一个图标。
• 悬浮按钮带有一个细微的暗影。

这是要完结悬浮按钮的一切行为。让咱们逐渐完结这些需求。

在此之前，需求先创立并初始化一个屏幕用来承载这个悬浮按钮。

以下是一个简单的列表视图，嵌套在导航视图和选项卡视图中，列表中显示了 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")
            }
        }
    }
}

示例运转截图如下：

悬浮按钮出现在屏幕的最前方

首先，是需求完结需求中的第一步，悬浮按钮应该出现在屏幕的主要内容前面。

要使视图出现在另一个视图前面，可以运用 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")
            }
        }
    }
}

1. 将内容视图（List）包装在 ZStack 中。
2. 将一个按钮放在内容视图上。

这将在列表视图上增加一个加号图画按钮。

示例运转截图如下：

悬浮按钮坐落屏幕的右下角

接着，是需求完结需求中的第二步，使按钮与内容视图对齐到右下角。

这儿可以在代码中运用 ZStack 的 alignment 参数将按钮与右下角对齐，中心代码如下：

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

1. ZStack(alignment: .bottomTrailing) 使较小的视图（Button）与较大的视图（List）底部右对齐。
2. 咱们还在按钮周围增加了填充，以使其不会过于靠近边际。

示例运转截图如下：

使悬浮按钮呈现圆形

接着，是需求完结需求中的第三步，使悬浮按钮具有圆角形状，并在中心具有一个图标。

目前的状况位置是正确的，但外观还不符合要求。

可以运用一系列修饰符使其变成圆形并加粗，中心代码如下：

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

• 更改了字体款式，增加了填充，背景色和前景色，并将其裁剪成圆形。

增加暗影

最后，是需求完结需求中的第四步，使悬浮按钮带有一个细微的暗影。

咱们经过增加暗影为其增色，使其看起来像悬浮。

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

示例运转截图如下：

这就是在 SwiftUI 中创立悬浮操作按钮所需的全部进程。

总结

在本文中，咱们学习了怎么在 SwiftUI 中创立一个悬浮操作按钮，它是 Android 和 Material Design 中常用的 UI 元素。经过逐渐完结悬浮按钮的各个特性来完结这个进程。

希望本文的内容对你在 SwiftUI 开发中有所帮助，可以轻松地完结美丽的悬浮操作按钮，增强运用界面和用户交互体会。