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

 更新时间:2023年10月27日 10:46:15   作者:网罗开发  
悬浮操作按钮(Floating Action Button, FAB)是一种在 Android 和 Material Design 中使用的 UI 元素,它用于触发特定屏幕的主要操作,下面我们就来详细介绍一下如何在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")
            }
        }
    }
}

示例运行截图如下:

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

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

要使视图出现在另一个视图前面,可以使用 ZStackoverlay 修饰符。

在这种情况下,选择使用 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 中。将一个按钮放在内容视图上。

这将在列表视图上添加一个加号图像按钮。

示例运行截图如下:

悬浮按钮位于屏幕的右下角

接着,是需要实现需求中的第二步,使按钮与内容视图对齐到右下角。

这里可以在代码中使用 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")
            }
        }
    }
}
  • ZStack(alignment: .bottomTrailing) 使较小的视图(Button)与较大的视图(List)底部右对齐。
  • 我们还在按钮周围添加了填充,以使其不会过于靠近边缘。

示例运行截图如下:

将按钮对齐到屏幕的右下角

使悬浮按钮呈现圆形

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

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

可以使用一系列修饰符使其变成圆形并加粗,核心代码如下:

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 开发中有所帮助,能够轻松地实现漂亮的悬浮操作按钮,增强应用界面和用户交互体验。

以上就是详解如何在SwiftUI中创建悬浮操作按钮的详细内容,更多关于SwiftUI创建悬浮操作按钮的资料请关注脚本之家其它相关文章!

相关文章

  • Swift开发之UITableView状态切换效果

    Swift开发之UITableView状态切换效果

    这篇文章主要介绍了Swift开发之UITableView状态切换效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 用Swift构建一个简单的iOS邮件应用的方法

    用Swift构建一个简单的iOS邮件应用的方法

    这篇文章主要介绍了用Swift构建一个简单的iOS邮件应用的方法,包括查看和标记已读等基本的邮件应用功能,需要的朋友可以参考下
    2015-07-07
  • Swift中图片资源使用流程的优化方法详解

    Swift中图片资源使用流程的优化方法详解

    这篇文章主要给大家介绍了关于Swift中图片资源使用流程的优化方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 在 Swift 中编写Git Hooks脚本的方法

    在 Swift 中编写Git Hooks脚本的方法

    在本例中,我使用了 commit-msg 钩子,它能够在当前提交信息生效前修改此信息,钩子由一个参数调用,该参数是指向包含用户输入的提交消息的文件的路径,这意味着,为了改变提交消息,我们只需要从文件中读取、修改其内容,然后写回调用挂钩的文件
    2022-06-06
  • Swift中常量和变量的区别与声明详解

    Swift中常量和变量的区别与声明详解

    Swift语言同样和Java和OC等语言一样是同样是需要声明常量和变量的,下面就让我们来学习一下Swift的常量和变量。这篇文章主要给大家介绍了关于Swift中常量和变量的区别与声明的相关资料,需要的朋友可以参考下。
    2017-11-11
  • Swift 如何让ScrollView滚动到具体某个位置

    Swift 如何让ScrollView滚动到具体某个位置

    这篇文章主要介绍了Swift 如何让ScrollView滚动到具体某个位置,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 使用Swift实现iOS App中解析XML格式数据的教程

    使用Swift实现iOS App中解析XML格式数据的教程

    这篇文章主要介绍了使用Swift实现iOS App中解析XML格式数据的教程,讲到了iOS中提供的NSXMLParser和NSXMLParserDelegate两个API的用法,需要的朋友可以参考下
    2016-04-04
  • swift中可选值?和!使用的方法示例

    swift中可选值?和!使用的方法示例

    这篇文章主要给大家介绍了关于swift中可选值?和!使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • Swift如何为设置中心添加常用功能

    Swift如何为设置中心添加常用功能

    这篇文章主要给大家介绍了关于Swift如何为设置中心添加常用功能的相关资料,包含了跳转到AppStore、邮件反馈功能、系统分享功能以及打开某些网址等功能,需要的朋友可以参考借鉴,下面来一起看看吧
    2018-05-05
  • 在 Swift 中测试 UIAlertController的方法

    在 Swift 中测试 UIAlertController的方法

    这篇文章主要介绍了在 Swift 中测试 UIAlertController的方法的,需要的朋友可以参考下
    2015-10-10

最新评论