悬浮操作按钮 「Floating Action Button <FAB>」现在经常在各类 APP 中能够看到，它在 Android Material Design 中广泛使用。
特征
本次示例的悬浮操作按钮有以下特征
- 操作按钮悬浮在页面试图的最上方，不被页面内容遮挡；
- 操作按钮悬浮于屏幕的右下角，尽可能减少遮盖页面内容；
示例图
示例代码
ZStack(alignment: .bottomTrailing) {
List(0..<100) { i in
Text("Item \(i)")
}
.navigationTitle("Home")
NavigationLink {
Text("新增页面")
} label: {
Image("codeun")
.resizable()
.scaledToFill()
.padding(10)
.frame(width: 64, height: 56)
.background(Color(hue: 0.05, saturation: 0.05, brightness: 0.82, opacity: 1.00))
.clipShape(Circle())
.shadow(radius: 4, x: 0, y: 4)
}
.padding()
}代码下载
Demo 代码编写测试于 Xcode 15
本文自 https://www.codeun.com 发布，相应代码均自主编写并严格审阅和测试，完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载，请注明出处：https://www.codeun.com/archives/1250.html ·