You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除Slider滑块Thumb周围的额外内边距?

如何移除Slider滑块Thumb周围的额外内边距?

我最近更新了Material组件库之后,发现Slider滑块的Thumb(滑块按钮)周围多出了一圈额外的水平间距,翻了好多资料都没找到怎么去掉这个间距的方法。有没有小伙伴遇到过这个问题,并且找到了解决方案呀?

CompositionLocalProvider(LocalRippleConfiguration provides null) {
    Slider(
        value = sliderValue,
        onValueChange = { newValue ->
            sliderValue = newValue
            onValueChange(newValue)
        },
        valueRange = valueRange,
        steps = steps,
        thumb = {
            Image(
                painter = painterResource(R.drawable.ic_thumb_inverted),
                contentDescription = null,
                modifier = Modifier
                    .size(48.dp)
                    .testTag("thumb"),
            )
        },
        track = { sliderState ->
            SliderDefaults.Track(
                drawStopIndicator = {},
                modifier = Modifier
                    .scale(scaleX = 1f, scaleY = 0.8f),
                sliderState = sliderState,
                colors = SliderDefaults.colors(
                    activeTrackColor = neonBlue,
                    activeTickColor = Color.Transparent,
                    inactiveTickColor = Color.Transparent,
                    inactiveTrackColor = linkWater2Blue,
                    thumbColor = Color.Transparent,
                ),
            )
        },
        modifier = Modifier
            .constrainAs(slider) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                top.linkTo(parent.top)
                width = Dimension.fillToConstraints
            }
            .testTag("slider"),
    )
}

问题示意图:Slider滑块的Thumb两侧存在明显的额外空白间距,滑块按钮与轨道未对齐,视觉上有多余的留白。

备注:内容来源于stack exchange,提问作者Javokhir Sherbaev

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.15 10:24:33