fix: use adopt width to fill track width adapt the thumb

This commit is contained in:
2023-11-15 00:55:07 +08:00
parent a30545fc73
commit bda172b4d6

View File

@@ -36,6 +36,7 @@ import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerBasedShape import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@@ -102,6 +103,7 @@ fun Slider(
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) { ) {
val thumbDiameter = style.thumbRadius * 2 val thumbDiameter = style.thumbRadius * 2
val trackAdoptWidth = style.trackWidth - thumbDiameter
val hovered by interactionSource.collectIsHoveredAsState() val hovered by interactionSource.collectIsHoveredAsState()
var dragging by remember { mutableStateOf(false) } var dragging by remember { mutableStateOf(false) }
val animatedScale by animateFloatAsState(if (hovered || dragging) style.thumbGain else 1f) val animatedScale by animateFloatAsState(if (hovered || dragging) style.thumbGain else 1f)
@@ -109,27 +111,29 @@ fun Slider(
val offsetXFromValue = (value.coerceIn(min, max) - min) / (max - min) * maxOffset val offsetXFromValue = (value.coerceIn(min, max) - min) / (max - min) * maxOffset
var absOffsetX by remember { mutableStateOf(0f) } var absOffsetX by remember { mutableStateOf(0f) }
var offsetX by remember { mutableStateOf(offsetXFromValue) } var offsetX by remember { mutableStateOf(offsetXFromValue) }
val draggedOffsetX = with(LocalDensity.current) { (offsetX.toDp() + style.thumbRadius).toPx() }
fun updateValue() { fun updateValue() {
val newValue = (offsetX / maxOffset) * (max - min) + min val newValue = (offsetX / maxOffset) * (max - min) + min
onValueChange(newValue) onValueChange(newValue)
} }
@Composable @Composable
fun Track() { fun Track(content: @Composable () -> Unit) {
val cornerSize = (style.trackShape as? CornerBasedShape)?.topStart?.toPx(Size.Zero, LocalDensity.current) ?: 0f val cornerSize = (style.trackShape as? CornerBasedShape)?.topStart?.toPx(Size.Zero, LocalDensity.current) ?: 0f
Box( Box(modifier = Modifier.width(style.trackWidth), contentAlignment = Alignment.Center) {
modifier = Modifier.size(style.trackWidth, style.trackHeight) Box(
.background(colors.trackInactiveColor, style.trackShape) modifier = Modifier.size(trackAdoptWidth, style.trackHeight)
.borderOrNot(style.trackBorder, style.trackShape) .background(colors.trackInactiveColor, style.trackShape)
.drawWithContent { .borderOrNot(style.trackBorder, style.trackShape)
drawRoundRect( .drawWithContent {
color = colors.trackActiveColor, drawRoundRect(
size = Size(draggedOffsetX, size.height), color = colors.trackActiveColor,
cornerRadius = CornerRadius(cornerSize, cornerSize) size = Size(offsetX, size.height),
) cornerRadius = CornerRadius(cornerSize, cornerSize)
} )
) }
)
content()
}
} }
@Composable @Composable
@@ -181,7 +185,7 @@ fun Slider(
}, },
contentAlignment = Alignment.CenterStart contentAlignment = Alignment.CenterStart
) { ) {
Track() Track {}
Thumb() Thumb()
} }
} }