Compose Multiplatform iOS端无法在顶部/底部系统栏后绘制内容求助

要实现顶部和底部系统栏后绘制背景，需要分Android和iOS平台分别配置原生层窗口属性，再结合Compose的WindowInsets API调整布局：

Android 端配置 #

1. 允许内容延伸至系统栏区域
   在Activity的onCreate方法中（或Composable内通过SideEffect执行），关闭系统栏自动适配并设置栏为透明：

// Activity 代码
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    window.statusBarColor = Color.TRANSPARENT
    window.navigationBarColor = Color.TRANSPARENT
}

2. Compose 布局处理
   用ProvideWindowInsets包裹根布局，让背景填充整个窗口，同时给可交互内容添加系统栏内边距避免遮挡：

ProvideWindowInsets {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue) // 背景会延伸到系统栏后方
    ) {
        // 可交互内容区域，添加内边距避开系统栏
        Column(
            modifier = Modifier
                .windowInsetsPadding(WindowInsets.systemBars)
        ) {
            // 你的页面内容
        }
    }
}

可选：调整状态栏文字颜色，适配背景深浅

// 放在Activity或SideEffect中
ViewCompat.getWindowInsetsController(window.decorView)?.run {
    isAppearanceLightStatusBars = true // 浅色文字，背景为深色时设为false
    isAppearanceLightNavigationBars = true
}

iOS 端配置 #

1. 配置ViewController允许内容延伸
   在iOS的MainViewController中设置窗口延伸属性：

override func viewDidLoad() {
    super.viewDidLoad()
    edgesForExtendedLayout = .all
    extendedLayoutIncludesOpaqueBars = true
    navigationController?.navigationBar.isTranslucent = true
}

2. Compose 布局处理
   和Android端逻辑一致，让背景铺满窗口，给可交互内容添加内边距：

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Blue)
) {
    Column(
        modifier = Modifier
            .windowInsetsPadding(WindowInsets.systemBars)
    ) {
        // 你的页面内容
    }
}

核心逻辑是：先让原生窗口允许内容延伸至系统栏区域，再通过Compose的windowInsetsPadding确保可交互元素不被系统栏遮挡，而背景会自动铺满整个窗口（包括系统栏后方）。

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