Question

@Composable
fun   ShowScreen(viewModel: UseListViewModel){
    Column() {
        ShowList(viewModel = viewModel)
        Buttons(viewModel)
    }
}

@Composable
private fun ShowList(viewModel: UseListViewModel) {

    LazyColumn() {
        items(viewModel.itemListMutableState.value?: emptyList()){
            ShowItem(it,viewModel)
        }
    }

}
@Composable
private fun ShowItem(item: IBaseDataModel, viewModel: UseListViewModel) {
    Row (horizontalArrangement = Arrangement.SpaceBetween,verticalAlignment= Alignment.CenterVertically,
        modifier = Modifier
            .background(Color(AppConstants.itemHolderBackgroundColor(item.state)))
            .clickable { viewModel.selectItem(item) }

            .fillMaxWidth()
    ){
        Text(text = item.idString)
        Text(text = item.date1String)
        Checkbox(checked = item.isSelected,onCheckedChange = { viewModel.setIsSelectedItem(item,it)})
        Button(onClick = {viewModel.deleteItem(item)}) {
            Text(text = "delete")
        }
    }


}
@Composable
private fun Buttons(viewModel: UseListViewModel){
    Row (verticalAlignment = Alignment.Bottom,modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceEvenly){
        Button(onClick = {viewModel.refreshClick()}) {
            Text(text = "refresh")
        }
        Button(onClick = {viewModel.addClick()}) {
            Text(text = "add")
        }
        val a=if(viewModel.itemListMutableState.value!=null) viewModel.buttonsViewViewModel.buttonNext.visibility else 8

        if(a==0){
            Button(onClick = {viewModel.nextStateClick()}) {
                Text(text = "next")
            }
        }


    }

}

当列表项填满屏幕时，按钮消失.. 如何将按钮保持在屏幕底部？

许多应用需要显示项目集合。本文档介绍了如何在 Jetpack Compose 中高效地执行此操作。

如果您知道您的用例不需要任何滚动，您可能希望使用简单的 Column 或 Row（取决于方向），并通过遍历列表来发出每个项目的内容，如下所示：

Answer 1

您可以删除 Column 并仅使用一个 LazyColumn 作为 ShowScreen。 ShowList 现在可以作为 LazyListScope 的扩展函数，这将允许直接在 items 函数内调用父 LazyColumn 的 ShowList。

@Composable
fun ShowScreen(viewModel: UseListViewModel){
    LazyColumn {
        ShowList(viewModel)
        item { 
            Buttons(viewModel)
        }
    }
}

private fun LazyListScope.ShowList(viewModel: UseListViewModel) {
    items(viewModel.itemListMutableState.value?: emptyList()){
        ShowItem(it,viewModel)
    }
}

请注意，ShowList 现在不是 @Composable 函数。

Answer 2

像这样使用 weight() 方法：

@Composable
fun ShowScreen(viewModel: UseListViewModel) {
    Column(Modifier.fillMaxSize()) { // <-- new
        ShowList(
            modifier = Modifier.weight(1f), // <-- new
            viewModel = viewModel
        )
        Buttons(viewModel)
    }
}

@Composable
private fun ShowList(
    modifier: Modifier, // <-- new
    viewModel: UseListViewModel
) {
    LazyColumn(modifier) { // <-- new
        items(viewModel.itemListMutableState.value ?: emptyList()) {
            ShowItem(it, viewModel)
        }
    }
}

@Composable
private fun ShowItem(item: IBaseDataModel, viewModel: UseListViewModel) {
    Row(horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .background(Color(AppConstants.itemHolderBackgroundColor(item.state)))
            .clickable { viewModel.selectItem(item) }
            .fillMaxWidth()
    ) {
        Text(text = item.idString)
        Text(text = item.date1String)
        Checkbox(
            checked = item.isSelected,
            onCheckedChange = { viewModel.setIsSelectedItem(item, it) })
        Button(onClick = { viewModel.deleteItem(item) }) {
            Text(text = "delete")
        }
    }


}

@Composable
private fun Buttons(viewModel: UseListViewModel) {
    Row(
//        verticalAlignment = Alignment.Bottom, // remove this
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = { viewModel.refreshClick() }) {
            Text(text = "refresh")
        }
        Button(onClick = { viewModel.addClick() }) {
            Text(text = "add")
        }
        val a =
            if (viewModel.itemListMutableState.value != null) viewModel.buttonsViewViewModel.buttonNext.visibility else 8

        if (a == 0) {
            Button(onClick = { viewModel.nextStateClick() }) {
                Text(text = "next")
            }
        }
    }
}

LazyColumn 如何与其他 Composable 一起适应屏幕？

2 个答案: