Compose中如何让Slider贴合底部Bar边缘（消除内边距）

我正在开发Spotify克隆应用，想要实现类似示例的底部播放栏，但Slider始终无法填充最大宽度——左右和底部总有内边距。试过用LinearProgressIndicator，效果也不理想。以下是我的Compose实现代码：

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    private val viewModel: AudioViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AudioAppTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                   HomeScreen(
                       progress = 0f,
                       onProgress = {},
                       isAudioPlaying= true,
                       currentPlayingAudio = viewModel.audioList[0],
                       audioList = viewModel.audioList,
                       onStart={},
                       onItemClick= {  },
                       onNext= { }
                   )
                }
            }
        }
    }
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun HomeScreen(
    progress: Float,
    onProgress:(Float) -> Unit,
    isAudioPlaying: Boolean,
    currentPlayingAudio: Audio,
    audioList: List<Audio>,
    onStart:() -> Unit,
    onItemClick: (Int)->Unit,
    onNext: ()->Unit
) {
    Scaffold(
        bottomBar = {
            BottomBarPlayer(
                progress = progress,
                onProgress = onProgress,
                isAudioPlaying = isAudioPlaying,
                audio = currentPlayingAudio,
                onStart = onStart,
                onNext = onNext,
            )
        }
    ){

    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomBarPlayer(
    progress: Float,
    onProgress: (Float) -> Unit,
    isAudioPlaying: Boolean,
    audio: Audio,
    onStart: () -> Unit,
    onNext: () -> Unit
) {
    Surface{
        val interactionSource = remember { MutableInteractionSource() }
        var sliderPosition by remember { mutableFloatStateOf(0f) }
        Column(modifier = Modifier
            .height(60.dp)
            .fillMaxWidth()
            .background(color = Color.Gray),
            verticalArrangement = Arrangement.SpaceBetween){
            ArtistInfo(audio = audio)
            Spacer(modifier = Modifier.weight(1f))
            Slider(
                value = sliderPosition,
                onValueChange = { sliderPosition =it },
                valueRange = 0f..5f,
                onValueChangeFinished = {
                    // launch some business logic update with the state you hold
                },
                colors = SliderDefaults.colors(
                    inactiveTrackColor = Color.Gray,
                ),
                thumb = {
                    SliderDefaults.Thumb( //androidx.compose.material3.SliderDefaults
                        interactionSource = interactionSource,
                        thumbSize = DpSize(0.dp,0.dp)
                    )
                },

                )
        }
    }
}

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun ArtistInfo(
    audio: Audio,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier.padding(8.dp), horizontalArrangement = Arrangement.Start, verticalAlignment = Alignment.CenterVertically) {
        GlideImage(
            model = R.drawable.image1,
            contentDescription = "Audio Image",
            modifier = Modifier
                .size(56.dp)
                .clip(RoundedCornerShape(8.dp))
        )
        Spacer(modifier = Modifier.size(4.dp))

        Column(verticalArrangement = Arrangement.Center) {
            Text(
                text = audio.artistName,
                fontWeight = FontWeight.Bold,
                style = MaterialTheme.typography.titleLarge,
                overflow = TextOverflow.Clip,
                maxLines = 1
            )

            Spacer(modifier = Modifier.size(1.dp))

            Text(
                text = audio.audioName,
                fontWeight = FontWeight.Normal,
                style = MaterialTheme.typography.bodySmall,
                overflow = TextOverflow.Clip,
                maxLines = 1
            )
        }
    }
}

目标效果是底部播放栏的进度条完全铺满左右宽度，当前效果进度条左右和底部存在明显内边距，无法充满。

解决思路与修改方案 #

1. 移除Slider的默认内边距 #

Material3的Slider组件默认自带水平内边距，直接给Slider添加Modifier.padding(horizontal = 0.dp)就能去掉左右间距，同时加上fillMaxWidth()确保它占满可用宽度。

2. 调整Column布局结构 #

原代码中Spacer(modifier = Modifier.weight(1f))会让Slider被挤到下方，导致底部出现空隙。把Column的verticalArrangement改成Arrangement.Center，并移除这个多余的Spacer，让内容垂直居中，消除底部间距。

修改后的BottomBarPlayer代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomBarPlayer(
    progress: Float,
    onProgress: (Float) -> Unit,
    isAudioPlaying: Boolean,
    audio: Audio,
    onStart: () -> Unit,
    onNext: () -> Unit
) {
    Surface {
        val interactionSource = remember { MutableInteractionSource() }
        var sliderPosition by remember { mutableFloatStateOf(0f) }
        Column(
            modifier = Modifier
                .height(60.dp)
                .fillMaxWidth()
                .background(Color.Gray),
            verticalArrangement = Arrangement.Center
        ) {
            ArtistInfo(audio = audio)
            Slider(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 0.dp),
                value = sliderPosition,
                onValueChange = { sliderPosition = it },
                valueRange = 0f..5f,
                onValueChangeFinished = {
                    // 处理进度更新逻辑
                },
                colors = SliderDefaults.colors(
                    inactiveTrackColor = Color.Gray,
                ),
                thumb = {
                    SliderDefaults.Thumb(
                        interactionSource = interactionSource,
                        thumbSize = DpSize(0.dp, 0.dp)
                    )
                },
            )
        }
    }
}

3. 可选：微调ArtistInfo的内边距 #

如果ArtistInfo的padding(8.dp)导致整体底部栏左右仍有间距，可以适当减小这个值，优先通过调整父布局来对齐，不推荐使用负padding。

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