详解如何在SwiftUI中创建悬浮操作按钮
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>前言</li><li>创建悬浮操作按钮</li><li>悬浮按钮出现在屏幕的最前方</li><li>悬浮按钮位于屏幕的右下角</li><li>使悬浮按钮呈现圆形</li><li>添加阴影</li><li>总结</li></ul></div><p class="maodian"></p><h2>前言</h2><p>悬浮操作按钮（Floating Action Button, FAB）是一种在 Android 和 Material Design 中使用的 UI 元素。它用于触发特定屏幕的主要操作。</p>
<p>尽管它来自 Android，但在一些 iOS 应用中也可以看到这种模式。</p>
<p>以下是 Twitter 应用中悬浮操作按钮的示例。Twitter App 在最重要的操作步骤，发布推文时使用悬浮操作按钮。如下图，在右下角有一个蓝底中间有加号的按钮。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023102710420716.jpg" /></p>
<p>下面我们就来详细介绍一下还如何实现这个悬浮按钮需求。</p>
<p class="maodian"></p><h2>创建悬浮操作按钮</h2>
<p>如何 SwiftUI 创建一个类似 Twitter App 中的悬浮按钮。</p>
<p>实现悬浮操作按钮可能有很多方法，下面是我要实现按钮的一些简单需求，如下：</p>
<ul><li>悬浮按钮应该出现在屏幕的主要内容前面。</li><li>悬浮按钮位于屏幕的右下角。</li><li>悬浮按钮具有圆角形状，并在中心具有一个图标。</li><li>悬浮按钮带有一个轻微的阴影。</li></ul>
<p>这是要实现悬浮按钮的所有行为。让我们逐步实现这些需求。</p>
<p>在此之前，需要先创建并初始化一个屏幕用来承载这个悬浮按钮。</p>
<p>以下是一个简单的列表视图，嵌套在导航视图和选项卡视图中，列表中显示了 item 加索引内容。</p>
<p>并在菜单栏中添加了 Home 按钮和图标，核心代码如下：</p>
<div class="jb51code"><pre class="brush:java;">struct ContentView: View {
var body: some View {
TabView {
NavigationStack {
List(0..<100) { i in
Text("Item \(i)")
}
.navigationTitle("Home")
}
.tabItem {
Label("Home", systemImage: "house")
}
}
}
}
</pre></div>
<p>示例运行截图如下：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023102710420817.jpg" /></p>
<p class="maodian"></p><h2>悬浮按钮出现在屏幕的最前方</h2>
<p>首先，是需要实现需求中的第一步，悬浮按钮应该出现在屏幕的主要内容前面。</p>
<p>要使视图出现在另一个视图前面，可以使用 <code>ZStack</code> 或 <code>overlay</code> 修饰符。</p>
<p>在这种情况下，选择使用 <code>ZStack</code>，核心代码如下：</p>
<div class="jb51code"><pre class="brush:java;">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")
}
}
}
}
</pre></div>
<p>将内容视图（List）包装在 ZStack 中。将一个按钮放在内容视图上。</p>
<p>这将在列表视图上添加一个加号图像按钮。</p>
<p>示例运行截图如下：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023102710420818.jpg" /></p>
<p class="maodian"></p><h2>悬浮按钮位于屏幕的右下角</h2>
<p>接着，是需要实现需求中的第二步，使按钮与内容视图对齐到右下角。</p>
<p>这里可以在代码中使用 ZStack 的 <code>alignment</code> 参数将按钮与右下角对齐，核心代码如下：</p>
<div class="jb51code"><pre class="brush:java;">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")
}
}
}
}
</pre></div>
<ul><li><code>ZStack(alignment: .bottomTrailing)</code> 使较小的视图（<code>Button</code>）与较大的视图（<code>List</code>）底部右对齐。</li><li>我们还在按钮周围添加了填充，以使其不会过于靠近边缘。</li></ul>
<p>示例运行截图如下：</p>
<p style="text-align:center"><img alt="将按钮对齐到屏幕的右下角" src="https://img.jbzj.com/file_images/article/202310/2023102710420819.jpg" /></p>
<p class="maodian"></p><h2>使悬浮按钮呈现圆形</h2>
<p>接着，是需要实现需求中的第三步，使悬浮按钮具有圆角形状，并在中心具有一个图标。</p>
<p>目前的情况位置是正确的，但外观还不符合要求。</p>
<p>可以使用一系列修饰符使其变成圆形并加粗，核心代码如下：</p>
<div class="jb51code"><pre class="brush:java;">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")
}
}
}
}
</pre></div>
<ul><li>更改了字体样式，添加了填充，背景色和前景色，并将其裁剪成圆形。</li></ul>
<p style="text-align:center"><img alt="自定义按钮的外观" src="https://img.jbzj.com/file_images/article/202310/2023102710420820.jpg" /></p>
<p class="maodian"></p><h2>添加阴影</h2>
<p>最后，是需要实现需求中的第四步，使悬浮按钮带有一个轻微的阴影。</p>
<p>我们通过添加阴影为其增色，使其看起来像悬浮。</p>
<p>SwiftUI 通过 <code>shadow</code> 修饰符内置了添加阴影的方法，核心代码如下：</p>
<div class="jb51code"><pre class="brush:java;">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")
}
}
}
}
</pre></div>
<p>示例运行截图如下：</p>
<p style="text-align:center"><img alt="添加阴影" src="https://img.jbzj.com/file_images/article/202310/2023102710420821.jpg" /></p>
<p>这就是在 SwiftUI 中创建悬浮操作按钮所需的全部步骤。</p>
<p class="maodian"></p><h2>总结</h2>
<p>在本文中，我们学习了如何在 SwiftUI 中创建一个悬浮操作按钮，它是 Android 和 Material Design 中常用的 UI 元素。通过逐步实现悬浮按钮的各个特性来完成这个过程。</p>
<p>希望本文的内容对你在 SwiftUI 开发中有所帮助，能够轻松地实现漂亮的悬浮操作按钮，增强应用界面和用户交互体验。</p>
<p>以上就是详解如何在SwiftUI中创建悬浮操作按钮的详细内容，更多关于SwiftUI创建悬浮操作按钮的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>如何利用SwiftUI实现可缩放的图片预览器</li><li>SwiftUI图片缩放、拼图等处理教程</li><li>SwiftUI中@ViewBuilder的相关知识点解密</li><li>SwiftUI学习之state和Binding的区别浅析</li><li>SwiftUI 中创建反弹动画的实现</li><li>SwiftUI使用Paths和AnimatableData实现酷炫的颜色切换动画</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]