SwiftUI中如何将按钮定位在屏幕右下角（距边16pt）

我希望在所有设备上，将按钮定位在屏幕右下角，距离右侧边缘16像素、底部边缘16像素，且不受ZStack内其他屏幕元素的影响。

当前使用的视图代码 #

var body: some View {
    
    GeometryReader { geo in
        
        ZStack {
            HStack(spacing:  0) {
                VStack {
                    Text("The number two")
                    Text("2")
                        .font(.largeTitle)
                }
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                
                VStack {
                    Text("The number eight")
                    Text("8")
                        .font(.largeTitle)
                }
                .frame(maxWidth: .infinity)
                .background(Color.green)
                
            }
            
            Button(action: {
                print("Button tapped!")
            }) {
                Text("NEXT")
            }
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius:  10))
            .position(x:geo.size.width, y:geo.size.height)
            .padding(16)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.gray)
        
    }
    
}

问题分析 #

当前代码的问题在于使用 .position(x:geo.size.width, y:geo.size.height) 时，是将按钮的中心点定位到屏幕的右下角顶点，再加上 .padding(16) 会导致按钮部分区域超出屏幕边界，无法实现精确的边距控制。

最佳实现方案 #

方案一：利用 ZStack 对齐属性（推荐，最简洁） #

直接给 ZStack 设置 .bottomTrailing 对齐方式，再给按钮添加 16pt 的 padding，即可让按钮固定在屏幕右下角，且不受其他元素影响。这种方式无需额外的 GeometryReader，代码更简洁易维护：

var body: some View {
    ZStack(alignment: .bottomTrailing) {
        // 原有内容区域
        HStack(spacing: 0) {
            VStack {
                Text("数字2")
                Text("2")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity)
            .background(Color.purple)
            
            VStack {
                Text("数字8")
                Text("8")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity)
            .background(Color.green)
        }
        
        // 右下角按钮
        Button(action: {
            print("按钮被点击！")
        }) {
            Text("NEXT")
        }
        .padding()
        .background(Color.orange)
        .foregroundColor(.white)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(16) // 控制按钮与屏幕边缘的距离
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.gray)
}

方案二：GeometryReader 精确控制（适合复杂场景） #

如果需要更精细的位置控制，可以结合 GeometryReader 和 frame 对齐：

var body: some View {
    GeometryReader { _ in
        ZStack {
            // 原有内容区域
            HStack(spacing: 0) {
                VStack {
                    Text("数字2")
                    Text("2")
                        .font(.largeTitle)
                }
                .frame(maxWidth: .infinity)
                .background(Color.purple)
                
                VStack {
                    Text("数字8")
                    Text("8")
                        .font(.largeTitle)
                }
                .frame(maxWidth: .infinity)
                .background(Color.green)
            }
            
            // 右下角按钮
            Button(action: {
                print("按钮被点击！")
            }) {
                Text("NEXT")
            }
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
            .padding(16)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.gray)
    }
}

效果说明 #

两种方案都能保证按钮在所有设备上稳定处于屏幕右下角，距离边缘16像素，且完全不受 ZStack 内其他元素布局的影响。方案一的代码更简洁，是日常开发的首选。

内容的提问来源于stack exchange，提问作者soleil