Android Jetpack Compose如何实现文本/TextField自动水平滚动（跑马灯）

下面提供几种实用方案，解决Text/TextField内容超出控件时的自动水平滚动需求：

方法一：基础自动滚动（循环往复） #

利用ScrollState配合LaunchedEffect实现循环滚动逻辑，代码简洁易上手：

@Composable
fun AutoScrollText(text: String) {
    val scrollState = rememberScrollState()
    
    LaunchedEffect(Unit) {
        while (true) {
            // 滚动到文本末尾
            scrollState.animateScrollTo(scrollState.maxValue)
            delay(1000) // 末尾停顿1秒
            // 滚动回开头
            scrollState.animateScrollTo(0)
            delay(1000) // 开头停顿1秒
        }
    }

    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .horizontalScroll(scrollState),
        maxLines = 1 // 必须设置单行，否则文本换行后水平滚动失效
    )
}

方法二：自定义Modifier实现灵活控制 #

如果需要调整滚动速度、停顿时间等参数，可封装自定义Modifier，复用性更强：

fun Modifier.marquee(
    scrollState: ScrollState = rememberScrollState(),
    pauseMillis: Long = 1000,
    scrollDuration: Int = 3000
) = composed {
    LaunchedEffect(scrollState.maxValue) {
        // 文本未超出控件时，不执行滚动
        if (scrollState.maxValue == 0) return@LaunchedEffect
        
        while (true) {
            scrollState.animateScrollTo(
                scrollState.maxValue,
                animationSpec = tween(scrollDuration)
            )
            delay(pauseMillis)
            scrollState.animateScrollTo(0, tween(scrollDuration))
            delay(pauseMillis)
        }
    }
    horizontalScroll(scrollState)
}

// 使用示例
@Composable
fun CustomMarqueeText(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .marquee(pauseMillis = 1500, scrollDuration = 4000),
        maxLines = 1
    )
}

方法三：TextField的自动滚动适配 #

TextField需要兼顾输入交互和自动滚动，可通过焦点状态控制滚动逻辑：

@Composable
fun AutoScrollTextField() {
    val textState = remember { mutableStateOf("这是一段超长测试文本，用于演示TextField的自动滚动跑马灯效果") }
    val scrollState = rememberScrollState()
    var isFocused by remember { mutableStateOf(false) }

    // 失去焦点时启动自动滚动
    LaunchedEffect(isFocused, scrollState.maxValue) {
        if (isFocused || scrollState.maxValue == 0) return@LaunchedEffect
        
        while (true) {
            scrollState.animateScrollTo(scrollState.maxValue)
            delay(1000)
            scrollState.animateScrollTo(0)
            delay(1000)
        }
    }

    // 获取焦点时，输入内容自动滚动到光标位置
    LaunchedEffect(textState.value) {
        if (isFocused) {
            scrollState.scrollTo(scrollState.maxValue)
        }
    }

    TextField(
        value = textState.value,
        onValueChange = { textState.value = it },
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .horizontalScroll(scrollState)
            .onFocusChanged { isFocused = it.isFocused },
        maxLines = 1
    )
}

关键注意事项 #

• 必须设置maxLines = 1，否则文本会自动换行，水平滚动逻辑失效。
• 代码中通过判断scrollState.maxValue == 0，避免文本未超出控件时执行无效滚动循环。
• 可根据需求调整delay、scrollDuration等参数，适配不同的滚动速度和停顿时长。

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