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

news/2025/7/23 12:16:40

在这里插入图片描述

文章目录

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

前言

悬浮操作按钮(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 inText("Item \(i)")}.navigationTitle("Home")}.tabItem {Label("Home", systemImage: "house")}}}
}

示例运行截图如下:

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

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

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

在这种情况下,选择使用 ZStack,核心代码如下:

struct ContentView: View {var body: some View {TabView {NavigationStack {// 1ZStack {List(0..<100) { i inText("Item \(i)")}.navigationTitle("Home")// 2Button {// 操作} label: {Image(systemName: "plus")}}}.tabItem {Label("Home", systemImage: "house")}}}
}
  1. 将内容视图(List)包装在 ZStack 中。
  2. 将一个按钮放在内容视图上。

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

示例运行截图如下:

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

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

这里可以在代码中使用 ZStack 的 alignment 参数将按钮与右下角对齐,核心代码如下:

struct ContentView: View {var body: some View {TabView {NavigationStack {// 1ZStack(alignment: .bottomTrailing) {List(0..<100) { i inText("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 inText("Item \(i)")}.navigationTitle("Home")Button {// 操作} label: {// 1Image(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 inText("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 开发中有所帮助,能够轻松地实现漂亮的悬浮操作按钮,增强应用界面和用户交互体验。

文章来源:https://blog.csdn.net/qq_36478920/article/details/134051378
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-5091396.html

相关文章

财务RPA机器人真的能提高效率吗?

财务部门作为一个公司的管理职能部门承担着一个公司在商业活动中各个方面的重要职责。理论上来说&#xff0c;一个公司的财务部门的实际工作包含但不限于对企业的盈亏情况进行评估、对风险进行预测、通过数据分析把握好公司的财务状况、税务管理等。 然而&#xff0c;实际上在…

在自己的服务器上部署个人博客和开源项目:实现数字存在感

在数字时代&#xff0c;拥有自己的服务器不再是一项难以实现的任务。通过云计算和开源技术的广泛应用&#xff0c;个人可以轻松地拥有自己的服务器&#xff0c;并在其上部署个人博客以及开源项目&#xff0c;为自己在互联网上创造一个数字存在感。本文将介绍如何在自己的服务器…

LeetCode|动态规划|139. 单词拆分、198. 打家劫舍、213. 打家劫舍 II

目录 一、139. 单词拆分 1.题目描述 2.解题思路 3.代码实现 二、198. 打家劫舍 1.题目描述 2.解题思路 3.代码实现 三、213. 打家劫舍 II 1.题目描述 2.解题思路 3.代码实现 一、139. 单词拆分 1.题目描述 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。…

GSCoolink GSV6183 带嵌入式MCU的MIPI D-PHY 转 DP/eDP

Gscoolink GSV6183是一款高性能、低功耗的MIPI D-PHY到DisplayPort/eDP 1.4转换器。通过集成基于RISC-V的增强型微控制器&#xff0c;GSV6183创造了一种具有成本效益的解决方案&#xff0c;提供了上市时间优势。MIPI D-PHY接收器支持CSI-2版本1.3和DSI版本1.3&#xff0c;每条通…

ATGM336H-5N一款高性能BDS/GNSS全星座定位导航模块

功能 概述 ATGM336H-5N系列模块是9.7X10.1尺寸的高性能BDS/GNSS全星座定位导航模块系列的总称。该系列模块产品都是基于中科微第四代低功耗GNSS SOC单芯片- -AT6558&#xff0c; 支持多种卫星导航系统&#xff0c;包括中国的BDS (北斗卫星导航系统)&#xff0c;美国的GPS,俄罗斯…

CSP-J2023入门组第二轮T4:旅游巴士

题目描述 小 Z 打算在国庆假期期间搭乘旅游巴士去一处他向往已久的景点旅游。 旅游景点的地图共有 n n n 处地点,在这些地点之间连有 m m m 条道路。其中 1 1

贪心算法学习——单调递增的数字

一&#xff0c;单调递增的数字 1.题目 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9示例 2: 输入…

WSL重装Anaconda

第一次安装使用的是官网下载的文件&#xff0c;存放在Windows中进行安装的&#xff0c;结果安装后有一些小错误&#xff0c;现在想重新安装过。 一、卸载原Anaconda 首先要知道Anaconda的安装地址&#xff0c;默认地址为&#xff1a;C:\Users\用户名\AppData\Local\Packages\…

LVS集群-DR模式【部署高可用LVS-DR集群】

文章目录 2.2 实战&#xff1a;配置LVS-DR集群2.2.1 配置IP2.2.2 生成ens33:1配置文件2.2.3 配置LVS-DR规则2.2.4 两台RealServer的IP配置Alastor62&#xff08;配置IP&#xff1a;192.168.1.62&#xff09;Alastor64&#xff08;配置IP&#xff1a;192.168.1.64&#xff09;客…

Avue树结构懒加载子节点不刷新

我们在使用Avue组件的时候&#xff0c;会用到树这种结构&#xff0c;但是树的懒加载子节点不刷新问题官方并没有告诉我们怎么做&#xff0c;下面是解决办法。 树结构懒加载子节点不刷新 data 首先在data创建一个map data(){maps: new Map() }子节点 treeLoad(tree, treeNode…