SwiftUI 中浮动在页面上的悬浮按钮

悬浮操作按钮 「Floating Action Button <FAB>」现在经常在各类 APP 中能够看到,它在 Android Material Design 中广泛使用。


特征

本次示例的悬浮操作按钮有以下特征

  • 操作按钮悬浮在页面试图的最上方,不被页面内容遮挡;
  • 操作按钮悬浮于屏幕的右下角,尽可能减少遮盖页面内容;

示例图

SwiftUI 中浮动在页面上的悬浮按钮
悬浮按钮示例图

示例代码

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()
}

代码下载

SwiftUI 中浮动在页面上的悬浮按钮

SwiftUI 悬浮按钮示例代码

赞助会员赞助会员免费
资源价格 ¥2.00 销售数量 2 更新时间 2023-11-20
已付费?登录刷新

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1250.html ·

(1)
上一篇 2023-11-20 下午7:41
下一篇 2023-11-24 下午10:57

发表回复

登录后才能评论