SwiftUI中如何修改顶部安全区域？实现左右应用样式一致

这个需求完全可以实现，不同平台的具体操作方法如下：

iOS 端实现 #

• 直接利用系统的「安全区域（Safe Area）」布局规则，把顶部内容（比如导航栏、页面容器）的顶部约束绑定到safeAreaLayoutGuide.topAnchor，而非页面根视图的顶部
• 如果要修改安全区域的背景色，直接设置导航栏的barTintColor即可，也可以在安全区域位置添加自定义背景视图并置于底层
• 简单代码示例（Swift）：

// 把内容容器顶部绑定到安全区域顶部
contentView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
// 设置导航栏背景色匹配右侧样式
navigationController?.navigationBar.barTintColor = .white

Android 端实现 #

• Android 11及以上版本可通过WindowInsets获取顶部安全区域高度，给内容容器添加对应高度的顶部内边距
• 若要调整状态栏样式，直接通过Window类设置状态栏背景色、透明度等属性即可
• 简单代码示例（Kotlin）：

// 获取顶部安全区域高度
val topInset = window.decorView.rootWindowInsets.getInsets(WindowInsets.Type.statusBars()).top
// 给内容容器设置顶部内边距，适配安全区域
contentView.setPadding(0, topInset, 0, 0)
// 设置状态栏背景色匹配右侧样式
window.statusBarColor = ContextCompat.getColor(this, R.color.white)

如果使用Flutter、React Native这类跨平台框架，也有现成的安全区域组件（比如Flutter的SafeArea、RN的SafeAreaView），只需调整组件背景色并将内容嵌套其中，就能快速实现和右侧应用一致的顶部安全区域样式。

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