SwiftUI之按钮悬浮位置

按钮悬浮,肯定用到ZStack容器

ZStack {
    ScrollView { ... }
    FloatingButton()
}

1.悬浮右下角

struct FloatingButton: View {

    var body: some View {
        VStack { // 1.垂直方向,使用弹簧压到底部
            Spacer()
            HStack { // 2.水平方向,使用弹簧压到右边
                Spacer()
                Button()
            }
            .padding() // 3.自动适配间距
        }
    }
}

2.悬浮左下角

struct FloatingButton: View {

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Button()
                Spacer()
            }
            .padding()
        }
    }
}

3.居中悬浮底部

struct FloatingButton: View {

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button()
                Spacer()
            }
            .padding()
        }
    }
}

参考项目: https://github.com/Puppychan/WhatToEatToday