SwiftUI如何上移HStack 缩小其与顶部刘海的间距

布局异常的核心原因有3个：

1. 嵌套VStack默认自带子视图间距，没有手动清零
2. 放在HStack和List之间的Spacer()完全无效：List是高优先级布局控件，会自动占满父视图剩余可用空间，Spacer抢不到布局尺寸，根本起不到调整位置的作用
3. 直接给根视图加ignoresSafeArea()会让整个视图布局到刘海/灵动岛覆盖的顶部安全区外，HStack内容被系统UI遮挡，看起来就像消失了

具体修改步骤 #

• 删掉HStack和List之间的Spacer()，所有间距用padding控制，稳定性远高于Spacer
• 给包裹HStack和List的VStack设置spacing: 0，清空默认的子视图间距
• 给HStack自定义上下左右内边距，其中.padding(.top, 数值)直接控制标题和顶部的距离，数值越小离刘海越近，建议从8开始调试
• 给List设置.listStyle(.plain)，去掉分组列表默认的顶部留白；iOS16及以上版本可额外加.scrollContentBackground(.hidden)去掉列表默认背景
• 在HStack内的Text和Button之间加一个Spacer()，把加号按钮自动推到屏幕右侧，符合常规交互逻辑
• 删掉Text和Button上无效的.frame(alignment: .top)修饰符：没有指定明确高度的frame会自动适配内容大小，alignment参数不会生效

修改后的核心代码 #

var body: some View {
    ZStack {
        VStack(spacing: 0) {
            HStack {
                Text("All Savings Bank Accounts")
                    .font(.title2)
                Spacer()
                Button("+") {
                    isSavingsFundsAlertsPresented = true
                }
                .font(.title2)
            }
            .padding(.horizontal, 16)
            .padding(.top, 8) // 调整这个数值控制标题和顶部的距离
            .padding(.bottom, 12)
            
            List(allBankAccountFunds) { aRow in
                TableRowSavingsAccount(Account: aRow)
            }
            .listStyle(.plain)
            // iOS16+ 可打开下一行注释去掉列表默认背景
            // .scrollContentBackground(.hidden)
        }
        
        AlertView(isShown: $isSavingsFundsAlertsPresented, Name: $SavingAccountName, Amount: $SavingAccountAmount, title: "Add Savings Account", placeholder: "Name of Account", buttonText: "Add Account") {
            if SavingAccountName != "" {
                let newAccount = SavingsAccount(context: context)
                newAccount.accountName = SavingAccountName
                newAccount.accountBalance = Double(SavingAccountAmount) ?? 0
                
                do {
                    try context.save()
                } catch {
                    print(error)
                }
            }
        }
    }
}

额外注意 #

如果后续需要让内容延伸到安全区，不要给整个根视图加ignoresSafeArea()，只给需要延伸的单独控件（比如背景、列表）加这个修饰符，并且明确指定要忽略的边缘（比如.ignoresSafeArea(edges: .top)），避免内容被刘海、底部手势条遮挡。

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