如何将LazyColumn放在android应用程序的整体内容下

Question

我刚开始学习Jetpack compose。我有一个应用程序，我从RickAndMortyApi中得到一个位置列表，我让它们逐页加载，为此我使用LazyColumn和collectAsLazyPagingItems()。我遇到了一个问题，即LazyColumn重叠所有内容(如果我从main column内部创建它)或滚动，无论页面上的内容(如果我从主列外部创建它)

下面是我创建位置列表的方法:

@Composable
fun CreateList(locationItems: Flow<PagingData<LocationsItemsList>>) {
val lazyLocationItems: LazyPagingItems<LocationsItemsList> =
locationItems.collectAsLazyPagingItems()
LazyColumn {
items(lazyLocationItems) {
it?.let { CreateLocationItem(location = it) }
}
}
}

@Composable
fun CreateLocationItem(location: LocationsItemsList) {
Row(
modifier = Modifier
.padding(all = 12.dp)
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Surface(
modifier = Modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(10.dp)),
color = Color(61, 61, 68)
) {
Column(
modifier = Modifier
.padding(6.dp)
.zIndex(5f)
) {
Text(
text = location.type,
color = Color.White,
maxLines = 1,
fontSize = 12.sp,
)
Text(
text = location.name,
color = Color.White,
maxLines = 1,
fontSize = 12.sp,
fontWeight = FontWeight.Bold,
)
Text(
text = location.dimension,
color = Color.White,
maxLines = 1,
fontSize = 12.sp,
)
}
}
}
}

下面是我如何调用CreateList()

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
val view = ComposeView(requireContext())
view.setContent {
MaterialTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = Color(34, 39, 46)
) {
Column {
Row {
GlideImage(
model = args.imageUrl,
contentDescription = R.string.dash.toString(),
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentScale = ContentScale.FillBounds
)
}
CreateTitle(args.name)
CreateInfoTextField(getString(R.string.status), args.status)
CreateInfoTextField(getString(R.string.species), args.species)
CreateInfoTextField(getString(R.string.location), args.location)
CreateTitle(getString(R.string.locations))
}
CreateList(locationItems = viewModel.pagedLocations)
}
}
}
return view
}

那么我如何使我的列表在bottom and scroll以及整个页面。

Answer 1

找到解决方案了。我把LazyColumn设置为主容器

所以，我的代码是这样的:

@Composable
fun CreateList(locationItems: Flow<PagingData<LocationsItemsList>>) {
val lazyLocationItems: LazyPagingItems<LocationsItemsList> =
locationItems.collectAsLazyPagingItems()
LazyColumn {
item {
Row {
GlideImage(
model = args.imageUrl,
contentDescription = R.string.dash.toString(),
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentScale = ContentScale.FillBounds
)
}
CreateTitle(args.name)
CreateInfoTextField(getString(R.string.status), args.status)
CreateInfoTextField(getString(R.string.species), args.species)
CreateInfoTextField(getString(R.string.location), args.location)
CreateTitle(getString(R.string.locations))
}
items(lazyLocationItems) {
it?.let { CreateLocationItem(location = it) }
}
}
}