Android Jetpack Compose 滚动到顶部

Question

在 Jetpack Compose 中，ScrollToTopButton 是从哪里来的？它在 Google 的文档中提到了，但遗憾的是他们没有提到该包。我已经导入了 foundation version 1.2.0-alpha08，也尝试过使用 1.2.0-beta02 以及 ui 和 material（1.1.1），但都没找到。（是的，我已经在互联网上搜索了这个术语，但没有结果。）

implementation "androidx.compose.foundation:foundation:${version}"
implementation "androidx.compose.foundation:foundation-layout:${version}"
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"

    @Composable
    fun MessageList(messages: List<Message>) {
        val listState = rememberLazyListState()
        // Remember a CoroutineScope to be able to launch
        val coroutineScope = rememberCoroutineScope()
    
        LazyColumn(state = listState) {
            // ...
        }
    
        ScrollToTopButton(
            onClick = {
                coroutineScope.launch {
                    // Animate scroll to the first item
                    listState.animateScrollToItem(index = 0)
                }
            }
        )
    }

谷歌文档

编辑：如果这不是他们提供的功能，而是建议创建自己的功能，那么被撰写文档的人真是可耻，它明确建议是Compose提供的一个函数。

编辑2：事实证明它是一个自定义的函数（请查看答案）。为什么文档的作者要这样写呢？为什么不直接写Button呢？唉。

- Dmitri

Answer 1

从文档中并不清楚，但实际上您需要自己创建。例如，您可以使用以下内容：

    @Composable
fun ScrollToTopButton(onClick: () -> Unit) {
    Box(
        Modifier
            .fillMaxSize()
            .padding(bottom = 50.dp), Alignment.BottomCenter
    ) {
        Button(
            onClick = { onClick() }, modifier = Modifier
                .shadow(10.dp, shape = CircleShape)
                .clip(shape = CircleShape)
                .size(65.dp),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.White,
                contentColor = Color.Green
            )
        ) {
            Icon(Icons.Filled.KeyboardArrowUp, "arrow up")
        }
    }
}

接着：

  val showButton by remember{
    derivedStateOf {
    listState.firstVisibleItemIndex > 0
   }
}
            AnimatedVisibility(
                visible = showButton,
                enter = fadeIn(),
                exit = fadeOut(),
            ) {
                ScrollToTopButton(onClick = {
                    scope.launch {
                        listState.animateScrollToItem(0)
                    }
                })
            }

- Code Poet

---

谢谢，我差点就想到同样的事情了，但是有些东西告诉我他们不可能把文档搞砸像这样(:嗯，我猜他们可以。它比不清楚更糟糕，它确实表明这是他们提供的一个函数。 - Dmitri

@Dmitri，请查看此视频，以便您可以找到并修复此答案中的错误。 - Phil Dukhov

谢谢@PylypDukhov，我已经更新了我的答案，并加入了最佳实践代码。 - Code Poet

我明白了，我在这个视频下留了一个评论，请点赞以便修复视频。 - Phil Dukhov

@PylypDukhov和Code Poet - 你们太棒了，在我尝试之前就找到并修复了错误！谢谢！非常好用。也许有一件事可以添加以使其更清晰 - 在showButton内使用scope.launch - 我使用了val scope = rememberCoroutineScope()。 - Dmitri