目录
我在Google Playstore上的应用程序
github代码
YouTube版本
简介
- 本系列将是对我在开发Android应用程序时面临的任何问题或任何观察结果的非正式演示。本系列中的每个博客文章都将是独特的，并且与其他博客文章是独一无二的，因此请随时环顾四周。
我们在说什么
- 在本教程中，我们将在JetPack撰写中实现一个简单但骇人听闻的滚动。
入门
- 这实际上是我们必须处理的两种情况：
1）始终显示用户的数据（如Tiktok）
2）用户有可能看不到数据
1）始终显示用户显示数据
- 这是两者中最简单的，我们可以创建一个简单的懒惰来并使用其DSL语言：
@Composable
fun EndlessScrolling(paddingValues: PaddingValues){
val notesList = remember {
mutableStateListOf<String>("2","2","3","2","2","3",)
}
Box() {
LazyColumn(
state= state,
modifier= Modifier
.fillMaxSize()
.padding(bottom = scaffoldPaddingBottom)
) {
items(notesList) { item ->
Card(
modifier = Modifier
.fillMaxWidth()
.height(itemHeight),
elevation = 8.dp
){
Text(text = "Item $item")
}
}
item{
CircularProgressIndicator( color = Color.Black)
LaunchedEffect(true){
notesList.add("3")
notesList.add("3")
notesList.add("3")
notesList.add("3")
notesList.add("3")
}
}
}
}
}
- 您可以看到lazycolumn首先使用
items(notesList) {}显示列表中的所有项目。然后，一旦所有项目都被加载并滚动浏览，就可以到达item{}，然后运行启动效果（true）{} composoble，可在列表中添加更多项目。 - 现在，在现实世界中，我们可以删除启动效应可组合的，并且只需将其内部放在
item{}中：
item{
//this would be the method that makes a call to get a new
// batch of data from the database and add it to the state,
// which is stored in the viewModel
viewModel.makeNetworkRequest()
}
- 如果组合为stateless。 ，我们只能删除
LaunchedEffect。
项目{}块的问题
- 只有在有足够的项目覆盖整个屏幕并且用户必须滚动以查看所有内容的情况下，才能正常工作。如果没有项目或没有足够的项目可以在懒惰的滚动中滚动，这将成为一个问题。
item{}块将连续运行
2）用户很有可能看到没有数据
- 这是事物开始变得有些骇人听闻的地方。该代码非常具体，主要是因为我使用了带有底栏和顶部栏的Scaffold，并且根据这个事实进行了一些计算。因此，如果您的代码不包含脚手架，它将有所不同
- 为了更好地解释我们要做的事情，我创建了此图。请继续阅读并参考：
- 在这个hacky解决方案中，我们必须遵循两个步骤：
1）确定用户可见的懒惰的高度。
2）确定LazyColumn项目的合并高度是否超过了用户可见的懒惰高度
- 所有这些都使用此代码完成：
@Composable
fun RefreshingAnimation(paddingValues: PaddingValues){
val configuration = LocalConfiguration.current
val screenHeight = configuration.screenHeightDp // total device screen height
val scaffoldBottomBarHeight = paddingValues.calculateBottomPadding() // bottom bar height
val scaffoldTopBarHeight = 100.dp // top bar height, found through trial and error
val screenHiddenByBars = scaffoldBottomBarHeight + scaffoldTopBarHeight // combination of bottom and top bar
val screenVisibleToUser = screenHeight - screenHiddenByBars.value //lazyColumn height visible to user
val notesList = remember {
mutableStateListOf<String>("2","2","2","2")
}
val totalItemHeight = notesList.size* itemHeight.value
val userCanScroll = (totalItemHeight > screenVisibleToUser)
}
- 然后类似于第一种情况，我们可以使用
item{}块来确定用户是否位于懒惰的底部。但是，我们使用使用userCanScroll变量来确定是否有足够的项目使用户滚动：
item{
CircularProgressIndicator( color = Color.Black)
LaunchedEffect(true){
if (userCanScroll){
delay(2000)
notesList.add("3")
notesList.add("3")
notesList.add("3")
notesList.add("3")
notesList.add("3")
}
}
}
-
userCanScroll变量被用作有条件的，以说明我们的代码是否必须滚动才能到达LazyColumn的底部。如果这是真的，这意味着我们可以运行代码并提出网络请求。
下一步是什么？
- 在第2部分中，我们将实现firebase数据库并提出分页的请求。
结论
- 感谢您抽出宝贵的时间阅读我的博客文章。如果您有任何疑问或疑虑，请在下面发表评论或在Twitter上与我联系。