如何自动滚动到滚动日志类型文本可组合项的底部
How to auto-scroll to the bottom of a Scrolling Log-Type Text composable
我正在尝试为日志类型的消息实现 Text
视图,其中对文本的每次更改都会自动将文本滚动到 last/newly-added 文本行。例如,如果我的文字大小只适合 4 行:
log 1
log 2
log 3
log 4
并添加了一个新行,那么输出应该是:
log 2
log 3
log 4
log 5
我想找到解决方案的具体问题是每次文本值发生变化时如何向下滚动到底部。我尝试了 的公认解决方案,其中 LaunchedEffect
在组合阶段被触发,但它在我的情况下不起作用:
@Composable
fun LogText(log: State<String>) {
var logState = rememberScrollState(0)
val coroutineScope = rememberCoroutineScope()
LaunchedEffect(coroutineScope) {
logState.scrollTo(logState.maxValue)
}
Text(
text = log.value,
modifier = Modifier.verticalScroll(logState),
)
}
LaunchedEffect
没有更改文本以向下滚动到最新行。
您对 LaunchedEffect
的用法是错误的。每次更改 LaunchedEffect
的键时,都会执行您传递给 LaunchedEffect
的 lambda。您正在使用记住的协程范围作为键,它永远不会改变,因此您的效果只执行一次。
此外,LaunchedEffect
lambda 默认在协程范围内启动,因此您不需要自己的。
像这样尝试:
@Composable
fun LogText(log: State<String>) {
var logState = rememberScrollState(0)
LaunchedEffect(log.value) {
logState.scrollTo(logState.maxValue)
}
...
}
这意味着:每次 log.value
更改时,执行 lambda。
还有一件事:如果您的文字变得很长,那么这样画会很重。我会考虑将其按行拆分为 List<String>
并将 LazyColumn
与多个 Text
项目一起使用...
我正在尝试为日志类型的消息实现 Text
视图,其中对文本的每次更改都会自动将文本滚动到 last/newly-added 文本行。例如,如果我的文字大小只适合 4 行:
log 1
log 2
log 3
log 4
并添加了一个新行,那么输出应该是:
log 2
log 3
log 4
log 5
我想找到解决方案的具体问题是每次文本值发生变化时如何向下滚动到底部。我尝试了 LaunchedEffect
在组合阶段被触发,但它在我的情况下不起作用:
@Composable
fun LogText(log: State<String>) {
var logState = rememberScrollState(0)
val coroutineScope = rememberCoroutineScope()
LaunchedEffect(coroutineScope) {
logState.scrollTo(logState.maxValue)
}
Text(
text = log.value,
modifier = Modifier.verticalScroll(logState),
)
}
LaunchedEffect
没有更改文本以向下滚动到最新行。
您对 LaunchedEffect
的用法是错误的。每次更改 LaunchedEffect
的键时,都会执行您传递给 LaunchedEffect
的 lambda。您正在使用记住的协程范围作为键,它永远不会改变,因此您的效果只执行一次。
此外,LaunchedEffect
lambda 默认在协程范围内启动,因此您不需要自己的。
像这样尝试:
@Composable
fun LogText(log: State<String>) {
var logState = rememberScrollState(0)
LaunchedEffect(log.value) {
logState.scrollTo(logState.maxValue)
}
...
}
这意味着:每次 log.value
更改时,执行 lambda。
还有一件事:如果您的文字变得很长,那么这样画会很重。我会考虑将其按行拆分为 List<String>
并将 LazyColumn
与多个 Text
项目一起使用...