Jetpack Compose：实现首元素占50%屏幕的可滚动Column

问题核心在于：给Column加上verticalScroll()后，Column会从「填充父级空间」变成「自适应内容高度」，这时候fillMaxHeight(0.5f)的参考对象不再是屏幕高度，而是Column自身的内容高度，导致比例失效。

这里给你两种可行方案，根据实际需求选择：

方案一：首元素固定占50%屏幕，剩余区域单独滚动 #

适合需要首元素始终停留在屏幕上半部分，仅下半部分内容滚动的场景：

Box(
    modifier = Modifier
        .background(Color.Black)
        .padding(horizontal = 15.dp)
        .fillMaxSize()
) {
    // 首元素：固定占屏幕50%高度
    QuickTipsCard(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.5f)
            .align(Alignment.TopCenter),
        backgroundColor = LightBlue,
        title = "Good morning!",
        description = "0 out of 10 task today",
        titleStyle = Typography.h1
    )

    // 下半部分滚动容器：占剩余50%屏幕高度
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.5f)
            .align(Alignment.BottomCenter)
            .verticalScroll(rememberScrollState())
    ) {
        // 剩余两个元素示例
        Text(
            text = "剩余元素1",
            color = Color.White,
            modifier = Modifier.padding(vertical = 16.dp)
        )
        Text(
            text = "剩余元素2\n".repeat(20), // 模拟超长可滚动内容
            color = Color.White,
            modifier = Modifier.padding(vertical = 16.dp)
        )
    }
}

原理： #

• 外层Box作为根容器，强制占据整个屏幕高度，为子元素提供固定的尺寸基准。
• 首元素通过fillMaxHeight(0.5f)直接基于屏幕高度计算，确保占比准确。
• 剩余元素放在独立的Column中，同样占用屏幕下半区，添加verticalScroll()后，仅这部分内容超出时会滚动。

方案二：整体可滚动，首元素初始占50%屏幕 #

适合需要整个页面（包括首元素）都能滚动，仅首元素初始状态占50%屏幕的场景：

Column(
    modifier = Modifier
        .background(Color.Black)
        .padding(horizontal = 15.dp)
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
) {
    // 首元素：最小高度设为屏幕的50%，滚动时可被顶出视野
    QuickTipsCard(
        modifier = Modifier
            .fillMaxWidth()
            .heightIn(min = LocalConfiguration.current.screenHeightDp.dp * 0.5f),
        backgroundColor = LightBlue,
        title = "Good morning!",
        description = "0 out of 10 task today",
        titleStyle = Typography.h1
    )

    // 剩余元素
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "剩余元素1",
            color = Color.White,
            modifier = Modifier.padding(vertical = 16.dp)
        )
        Text(
            text = "剩余元素2\n".repeat(20),
            color = Color.White,
            modifier = Modifier.padding(vertical = 16.dp)
        )
    }
}

原理： #

• 用LocalConfiguration获取屏幕高度，给首元素设置heightIn(min = ...)，保证初始状态下占50%屏幕。
• 整个外层Column添加verticalScroll()，当页面总内容超出屏幕时，整体可以滚动，首元素会随滚动向上移动。

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