android - 在列内使用lazyColum 在Jetpack Compose 中有错误
问题描述
我有一个lazyColumn,我想在列中使用它,但出现以下错误并且应用程序崩溃:
Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items()
lazyColumn 代码,我在这段代码中有一个列表:
@Composable
fun UpScreenSection(
modifier: Modifier,
state: ProfileState,
viewModel: ProfileViewModel
) {
Spacer(modifier = Modifier.size(24.dp))
Column(
modifier = modifier
.fillMaxSize()
.padding(24.dp)
) {
if (!state.items.isNullOrEmpty()) {
Box(
modifier = modifier
.fillMaxSize()
) {
LazyColumn(modifier = modifier.fillMaxSize()) {
items(state.items) { item ->
ProfileListItems(item = item, onItemClick = {
//TODO Navigate to specific screen
when (it.id) {
1 -> {
}
2 -> {
}
3 -> {
}
4 -> viewModel.navigate(ReferAFriendDestination.route())
}
})
}
}
}
}
}
Spacer(modifier = Modifier.size(24.dp))
}
以下可组合代码中使用的上述代码:
@Composable
fun ProfileContentSection(
modifier: Modifier = Modifier,
viewModel: ProfileViewModel
) {
val context = LocalContext.current
val scrollState = rememberScrollState()
Box(
modifier = modifier
.fillMaxSize()
) {
val state = viewModel.state.value
Column(
modifier = modifier
.fillMaxSize()
.verticalScroll(state = scrollState)
) {
AccountNameSection(modifier = modifier, viewModel = viewModel)
UpScreenSection(modifier, state, viewModel) // used above block codes
DownScreenSection(modifier, context)
}
if (state.error.isNotBlank())
SimpleSnackbar(
text = state.error,
modifier = modifier.align(Alignment.BottomCenter)
)
if (state.isLoading)
Loading(modifier = modifier.align(Alignment.BottomCenter))
}
}
我该如何解决这个错误?
注意:我想要一个可滚动的屏幕,其中包含小型设备的列表
解决方案
我找到了解决方案。我必须将 LayzyColumn 之外的每个视图都移到其中。
例子:
@Composable
fun SampleScreen(){
Box{
Column{
LazyColumn{
item{
other views
}
items(state.items){listItem ->
//Load list data
}
item{
//other views
}
}
}
}
}
使用此代码,我将拥有一个具有可滚动视图的屏幕。
推荐阅读
- swift - Swift:写入数据如何知道何时完成 Cocoa
- angular - 使用 ngClass 动画更改类状态
- parameters - 避免重载解析中的歧义
- android - OnCreate 方法不断调用 OnResume 方法
- wpf - 重新连接 RDP 时 WPF 应用程序更新布局
- javascript - 服务器端代码无法识别我的 req.body.variable,说明它未定义
- node.js - Nodejs如何分离多个“multipartform-data”POST请求
- r - 使用 GLM 模型运行调试时出错
- java - 如何修复包名称'android.support.graphics.drawable'用于:com.android.support:animated-vector-drawable:28.0.0
- javascript - 尝试通过 ajax 将表单数据发送到示例 PHP 文件