Jetpack Compose——Slider(滑块控件)简单使用

基于compose_version=1.1.0-beta01版本 参数如下:

Slider(
    value: Float,//当前值
    onValueChange: (Float) -> Unit,//滑动时回调当前值
    modifier: Modifier = Modifier,//布局修饰
    enabled: Boolean = true,//是否启用或交互
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,//可选值的范围,默认0-1
    /*@IntRange(from = 0)*/
    steps: Int = 0,//该值代表将拖动条均分为几等份。如果为0,那么是连续的值。如果是大于0,那么可选值范围会是指定的离散值
    onValueChangeFinished: (() -> Unit)? = null,//滑块值更改结束时候的回调。注意该回调不是用来更新滑块的进度的,而是用户通过拖动或者点击滑块完成选择新的数值后才有的回调
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },//自定义属性相关
    colors: SliderColors = SliderDefaults.colors()//拖动条各种状态滑块和轨道的颜色设置
)

简单使用:

val progress = remember {
        mutableStateOf(0f)
    }
Slider(value = progress.value, onValueChange = { progress.value = it })
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现跑马灯效果,可以使用`Animatable`和`AnimatableVector`来创建一个自定义的跑马灯效果的`Text`控件。 首先,需要添加以下依赖到你的项目中: ```kotlin implementation "androidx.compose.animation:animation:1.0.0" implementation "androidx.compose.animation:animation-core:1.0.0" implementation "androidx.compose.animation:animation-graphics:1.0.0" ``` 然后,可以创建一个自定义的`MarqueeText`控件,继承自`Text`: ```kotlin import androidx.compose.animation.animateColorAsState import androidx.compose.animation.core.* import androidx.compose.animation.core.AnimationConstants.Infinite import androidx.compose.foundation.layout.Box import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.vector.PathNode import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @Composable fun MarqueeText( text: String, modifier: Modifier = Modifier, speed: Dp = 100.dp, textColor: Color = Color.Black, backgroundColor: Color = Color.White, ) { var textWidth by remember { mutableStateOf(0f) } var offsetX by remember { mutableStateOf(0f) } var isRunning by remember { mutableStateOf(false) } val infiniteTransition = rememberInfiniteTransition() val animatedValue = animateFloatAsState( targetValue = if (isRunning) -textWidth else 0f, animationSpec = infiniteRepeatable( animation = tween(durationMillis = (textWidth / speed).toInt(), easing = LinearEasing), repeatMode = RepeatMode.Restart, ) ) LaunchedEffect(text) { isRunning = true } Box(modifier = modifier) { Text( text = text, modifier = Modifier.alpha(0f), onTextLayout = { layoutResult -> textWidth = layoutResult.size.width.toFloat() } ) Box( modifier = Modifier.offset(x = animatedValue.value) .onSizeChanged { size -> offsetX = size.width.toFloat() } ) { Text( text = text, modifier = Modifier.offset(x = offsetX), color = textColor, onTextLayout = { layoutResult -> textWidth = layoutResult.size.width.toFloat() } ) } Box( modifier = Modifier.offset(x = animatedValue.value + offsetX) .onSizeChanged { size -> offsetX += size.width.toFloat() } ) { Text( text = text, color = textColor, backgroundColor = animateColorAsState(targetValue = backgroundColor).value, onTextLayout = { layoutResult -> textWidth = layoutResult.size.width.toFloat() } ) } } } ``` 然后,你可以在你的Compose函数中使用`MarqueeText`控件来实现跑马灯效果: ```kotlin @Composable fun MyScreenContent() { MarqueeText( text = "Hello, Jetpack Compose!", modifier = Modifier.fillMaxWidth(), speed = 100.dp, textColor = Color.White, backgroundColor = Color.Blue, ) } ``` 这样,你就可以在你的界面上看到一个带有跑马灯效果的文本了。你可以根据需要调整`speed`来控制跑马灯的速度,`textColor`和`backgroundColor`来设置文本和背景颜色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值