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

Codeun

1 年前

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

Table of Contents

特征

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

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

示例图

示例代码

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