SwiftUI表单中按钮前景适配视图及消除留白问题解决

我用SwiftUI实现了一个包含语言输入项的表单页面，代码如下：

import Foundation
import SwiftUI

struct SomeViewName: View {

   @State private var languages = [String]()

   var body: some View {
        NavigationView {
            Form {
               Section(header: Text("Some Section")) {
                    ForEach(0..<allergies.count, id: \.self) { index in
                        TextField("Please enter your language", text: $languages[index])
                    }
                    if language.count < 5 {
                        Button(action: {
                            language.append("")
                        }) {
                            Text("Click to add a language")
                        }
                    }
                }

                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(.blue)
                        .frame(height: 50)
                        .padding(.horizontal, 20)
                    Button(action: {
                        saveDetails()
                    }) {
                        Text("Save your details")
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity, alignment: .center)
                    }
                    .buttonStyle(PlainButtonStyle()) // Remove the default button style
                    .padding(.horizontal)
                }
                .listRowInsets(EdgeInsets()) // Remove default padding
            }
            .navigationTitle("Your Known Languages")
            
        }
    }
}

页面文本字段显示正常，但底部保存按钮左右两侧存在留白，且尝试多种方式添加圆角均未成功，该如何解决？

问题根源 #

1. 代码中RoundedRectangle添加了.padding(.horizontal, 20)，直接导致按钮背景左右留白
2. 存在变量名错误（allergies/language应为languages），会引发运行异常
3. 按钮的padding和背景布局层级混乱，导致圆角视觉与点击区域不匹配

修正步骤 #

1. 移除背景视图的水平padding：将RoundedRectangle上的.padding(.horizontal, 20)删除，改为给整个ZStack添加外层padding，控制按钮与屏幕边缘的距离
2. 修正变量名错误：把allergies.count改为languages.count，language统一替换为languages
3. 统一布局层级：调整按钮的padding位置，确保点击区域与圆角背景完全重合

修正后的完整代码 #

import Foundation
import SwiftUI

struct SomeViewName: View {

    @State private var languages = [String]()

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Some Section")) {
                    ForEach(0..<languages.count, id: \.self) { index in
                        TextField("Please enter your language", text: $languages[index])
                    }
                    if languages.count < 5 {
                        Button(action: {
                            languages.append("")
                        }) {
                            Text("Click to add a language")
                        }
                    }
                }

                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(.blue)
                        .frame(height: 50)
                    Button(action: {
                        saveDetails()
                    }) {
                        Text("Save your details")
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity, alignment: .center)
                    }
                    .buttonStyle(PlainButtonStyle())
                }
                .listRowInsets(EdgeInsets())
                .padding(.horizontal, 20) // 外层padding控制按钮与屏幕的边距
            }
            .navigationTitle("Your Known Languages")
        }
    }

    // 补充原代码缺失的保存方法
    func saveDetails() {
        // 实现你的保存逻辑
    }
}

额外优化建议 #

• 给RoundedRectangle添加.shadow(color: .gray.opacity(0.3), radius: 2)，可以增强按钮的视觉层次感
• 将按钮封装为自定义View，方便在其他页面复用

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