Jetpack Compose中如何为带verticalScroll的Column设置类似LazyColumn的contentPadding

LazyColumn的contentPadding参数可以给滚动内容的顶部和底部添加留白，让内容在滚动时与容器边缘保持间距。如果用Column搭配verticalScroll修饰符实现相同效果，你可以通过以下两种方式：

方式一：给Column添加padding修饰符 #

在verticalScroll修饰符之后添加padding，这样padding会成为可滚动区域的一部分，和LazyColumn的contentPadding行为完全一致：

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .padding(top = 12.dp, bottom = 20.dp)
) {
    // 这里放置你的列表项内容
    // 示例：
    repeat(20) {
        Text(text = "第${it+1}项内容", modifier = Modifier.fillMaxWidth().padding(8.dp))
    }
}

方式二：在内容首尾添加Spacer #

如果需要更灵活的控制，可以在Column的内容最上方和最下方分别添加Spacer，模拟contentPadding的留白效果：

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
) {
    // 顶部留白
    Spacer(modifier = Modifier.height(12.dp))
    
    // 列表项内容
    repeat(20) {
        Text(text = "第${it+1}项内容", modifier = Modifier.fillMaxWidth().padding(8.dp))
    }
    
    // 底部留白
    Spacer(modifier = Modifier.height(20.dp))
}

两种方式都能实现和你给出的LazyColumn示例相同的上下留白效果，按需选择即可。

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