帮我用JetPack Compose写一个MarqueeText的控件,需要有一个文本的跑马灯效果
时间: 2024-04-11 08:26:56 浏览: 209
js实现文字跑马灯效果
当然可以帮你写一个使用JetPack Compose实现跑马灯效果的控件。以下是一个示例代码:
```kotlin
@Composable
fun MarqueeText(text: String) {
val textWidth = remember { mutableStateOf(0f) }
val offsetX = animateFloatAsState(
targetValue = -textWidth.value,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 3000),
repeatMode = RepeatMode.Restart
)
)
Box(
modifier = Modifier
.fillMaxWidth()
.onGloballyPositioned { layoutCoordinates ->
textWidth.value = layoutCoordinates.size.width.toFloat()
}
) {
Text(
text = text,
modifier = Modifier.offset(x = offsetX.value),
style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold)
)
}
}
```
你可以在Compose的UI层使用`MarqueeText`函数,传入你想要展示的文本。它会自动实现跑马灯效果。
```kotlin
@Composable
fun MyScreen() {
// ...
MarqueeText(text = "这是一个跑马灯效果的文本")
// ...
}
```
请注意,这只是一个简单的示例,你可以根据自己的需求对其进行修改和定制。希望对你有所帮助!如果有任何问题,请随时问我。
阅读全文