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

news2024/11/15 1:33:17

在这里插入图片描述

文章目录

    • 前言
    • 创建悬浮操作按钮
    • 悬浮按钮出现在屏幕的最前方
    • 悬浮按钮位于屏幕的右下角
    • 使悬浮按钮呈现圆形
    • 添加阴影
    • 总结

前言

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1135477.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

百度迁徒数据爬虫方法

百度迁徙数据是由百度公司提供的免费开放数据集&#xff0c;主要包含了全国范围内各大城市的每日人口流入流出情况。这些数据来源于百度地图上的用户位置信息&#xff0c;通过计算得到每个小时的流入流出人数&#xff0c;并且可以按照省级、市级等多种维度进行分析。 百度迁徙 …

Modbus转MQTT以太网网关MQT-802主要特点和典型应用

随着社会的快速发展&#xff0c;物联网已经潜移默化地深入工控行业的各个领域&#xff0c;其高效的资源整合和强大的数据采集能力&#xff0c;深受客户的喜爱。上海泗博为实现客户在云端平台接收处理世界万物的信息以及实现远程控制&#xff0c;精心打造一款全新物联网产品&…

制作翻页电子画册,手机观看更快捷

随着科技的发展&#xff0c;便携式翻页电子手册越来越受到人们的青睐。这种电子手册不仅方便携带&#xff0c;而且可以在手机上轻松观看&#xff0c;非常适合那些忙碌的上班族或者学生党。与传统纸质书籍相比&#xff0c;电子手册不仅节省了空间&#xff0c;而且还可以随时随地…

C51--单片机中断

51单片机是单线程模式&#xff0c;需要用到硬件中断。 一、中断系统 中断系统是为使CPU具有对外界紧急事件的实时处理能力而设置的。 当中央处理器CPU正在处理某件事的时候&#xff0c;外界发生了紧急事件请求&#xff0c;要求CPU暂停当前工作&#xff0c;转而去处理这个紧急…

LeetCode刷题---最长回文子串

方法一&#xff1a;暴力破解 class Solution {public String longestPalindrome(String s) {if(s.length()<2){return s;}//最长长度int maxLen0;//保留索引坐标String ans "";for(int i0;i<s.length()-1;i){for(int ji1;j<s.length();j){String strs.subs…

ubuntu 下的 使用anaconda 环境运行python 项目

pycharm部署django项目到云服务器的详细流程_编程网 anaconda 安装环境 ubuntu下Anaconda安装与使用教程_ubuntu 运行anaconda_fakerth的博客-CSDN博客 激活环境 conda activate web_hook_python3.9进入到项目目录 cd /home/web-hook-main查看端口是否被占用 sudo ss …

Spring Boot集成Swagger接口分类与各元素排序问题

在上一篇中我们完成使用JSR-303校验&#xff0c;以及利用Swagger2得到相关接口文档&#xff0c;这节&#xff0c;我们在原先的基础之上&#xff0c;完成Swagger中关于对各个元素之间控制前后顺序的具体配置方法。 Swagger的接口的分组 首先我们需要对Swagger中的接口也就是以…

浅谈wheel滚轮事件

<divonWheel{(ee) > {// new WheelEvent(自定义,e) 获取 e[wheelDelta],e[deltaY] 判断滚轮方向var e new WheelEvent(syntheticWheel,ee)console.log(滚动触发事件, e,ee);console.log(滚动触发事件e.wheelDelta, e[wheelDelta],e[deltaY]);console.log(滚动触发事件e.…

Spirit:继承 gh-ost 灵魂的 MySQL 在线大表变更方案

昨天看到社区发布了一个新的 MySQL 大表变更工具 Spirit。是海外支付巨头 Block 旗下的 Cash App (地位类似于支付宝) 开源的&#xff0c;作者之前也在 PingCAP 工作过。 目前市面上做大表变更的方案有两个&#xff1a; Percona 开源的 pt-online-schema-change&#xff0c;基…

WMS仓储管理系统如何保障仓库的安全性

仓库安全一直以来都是企业运营中的重要一环&#xff0c;而WMS仓储管理系统则可以为仓库安全提供有力的保障。本文将探讨WMS仓储管理系统如何在实际应用中确保仓库的安全性。 WMS管理系统是一种专门用于管理仓库和库存的软件&#xff0c;它可以帮助企业对库存进行跟踪、管理以及…

鼎鑫鸿鄴引入“能源互联网+”理念 打造共赢

近年来&#xff0c;随着全球能源消耗的不断增长和环境问题的日益突出&#xff0c;清洁能源转型成为全球共同关注的话题。中国作为全球最大的能源消费国&#xff0c;也在积极推动能源结构的优化和清洁能源的发展。鼎鑫鸿鄴新能源科技有限公司在推动清洁能源转型方面制定了一系列…

探索 10 个有价值的在线免费设计模板网站

对于许多设计师来说&#xff0c;现成的模板无疑可以大大提高工作效率和质量&#xff0c;特别是在赶上项目过程时。然而&#xff0c;找到合适和免费的模板是另一个问题。在这里&#xff0c;我整理了10个推荐的设计模板网站&#xff0c;希望能对您有所帮助。 1.即时设计 即时设计…

转化率的催化剂:网站客服机器人如何推动企业销售?

随着5G的推广&#xff0c;人工智能技术的普及程度越来越高&#xff0c;人机交互已经成为这个时代的常态&#xff0c;无论是在我们的日常生活中还是在企业服务中都非常常见。如今&#xff0c;无论是营销型企业还是客服型企业&#xff0c;都纷纷采用网站客服机器人服务&#xff0…

研究目标检测的同学看过来:超越YOLOv8!华为提出Gold-YOLO:高效实时

超越YOLOv8&#xff01;华为提出Gold-YOLO&#xff1a;高效实时目标检测器 超越YOLO系列&#xff08;v5、v6、v7、v8&#xff09;&#xff01;Gold-YOLO&#xff1a;一种全新的实时目标检测器&#xff0c;提出一种GD新机制&#xff0c;通过卷积和自注意力操作来实现&#xff0…

Paper - Neural Discrete Representation Learning (VQ-VAE) 论文简读

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/133992971 VQ-VAE 是基于变分自编码器&#xff08;VAE&#xff09;的生成模型&#xff0c;可以学习离散的潜在表示。VQ-VAE 的主要创新是引入了一…

【Python】基于非侵入式负荷检测与分解的电力数据挖掘

文章目录 前言一、案例背景二、分析目标三、分析过程四、数据准备4.1 数据探索4.2 缺失值处理 五、属性构造5.1 设备数据5.2 周波数据 六、模型训练七、性能度量文末送书&#xff1a;《Python数据挖掘&#xff1a;入门、进阶与实用案例分析》 前言 本案例将根据已收集到的电力…

Nodejs和Node-red的关系

NPM相关知识 npm概念 npm&#xff1a;Node Package Manager&#xff0c;Node包管理器。是Node.js默认的&#xff0c;以JavaScript编写的软件包管理系统。 npm工作原理 npm的操作原理是各个官网使用npm publish把代码提交到npm的服务器&#xff0c;其他人想要使用这些代码&am…

20 行为型模式-策略模式

1 策略模式概述 策略模式(strategy pattern)的原始定义是&#xff1a;定义一系列算法&#xff0c;将每一个算法封装起来&#xff0c;并使它们可以相互替换。策略模式让算法可以独立于使用它的客户端而变化。 2 策略模式原理 3 策略模式实现 策略模式的本质是通过Context类…

高数基础常用公式(持续更新)

1、求根公式 2、三角函数特殊度数对应值 3、三角函数常用公式

4个方法,提高excel表格制作效率

使用excell文件的时候总是会少不了要大批量的数据进行操作&#xff0c;今天分享4个快速使用excel操作的小技巧。希望能够帮大家提高excel制作效率。 技巧一&#xff1a;快速求和 当你想要分别得到行列的总和&#xff0c;我们可以选中表格数据以及总和的单元格&#xff0c;按住…