Android Jetpack Compose 滚动到顶部

Question

在 Jetpack Compose 中，ScrollToTopButton 来自哪里？ Google 的文档中提到了它。令人恼火的是，他们忽略了提及包裹。我有进口粉底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)
                }
            }
        )
    }

Google documentation

编辑：如果这不是他们提供的功能，而是创建您自己的功能的建议，那么无论编写文档的人都感到羞耻，它确实表明这是 Compose 提供的功能。

编辑 2：原来它是一个自定义函数（参见答案）。是什么促使文档的作者这样写的？为什么不直接放 Button？唉。

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)
                    }
                })
            }

Android Jetpack Compose 滚动到顶部

Android Jetpack Compose Scroll to Top

android

kotlin

android-jetpack-compose