求助：如何用Android Jetpack Compose设计上下分色背景UI

这里提供两种实现上下分栏UI的Compose代码，适配不同需求：

方案1：按比例分配高度（适配所有屏幕） #

这种方式让上下部分按权重占满屏幕，适合响应式布局：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.weight
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun SplitScreenUI() {
    Column(modifier = Modifier.fillMaxSize()) {
        // 上半部分：深蓝色背景
        Box(
            modifier = Modifier
                .weight(1f) // 占屏幕1/3高度，可自行调整数值
                .background(Color(0xFF1976D2)) // Material Design标准深蓝色
        ) {
            // 此处添加顶部区域内容，如标题、图标等
        }
        
        // 下半部分：白色背景
        Box(
            modifier = Modifier
                .weight(2f) // 占屏幕2/3高度
                .background(Color.White)
        ) {
            // 此处添加底部区域内容，如表单、列表等
        }
    }
}

方案2：固定顶部高度 #

如果需要顶部区域高度固定（比如200dp），可以用以下代码：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun FixedHeightSplitUI() {
    Column(modifier = Modifier.fillMaxSize()) {
        // 固定高度的顶部深蓝色区域
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color(0xFF1976D2))
        ) {
            // 顶部内容区
        }
        
        // 剩余高度的白色区域
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            // 底部内容区
        }
    }
}

关键说明 #

• 用Column作为根布局实现垂直分栏
• 通过weight（比例分配）或height（固定高度）控制上下区域尺寸
• background修饰符直接设置背景色，可替换为自定义色值
• 两个Box内部可添加任意Compose组件（文本、图片、按钮等）

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