按钮未显示 jetpack compose android

Question

我有一个可组合项，其中有一个 TextField 和它下面的一个按钮。文本字段按预期显示并工作，但该文本字段下方的按钮根本不显示。这是代码

@Composable
fun UpperPanel() {
    val keyboardController = LocalSoftwareKeyboardController.current

    var menuItems = DatabaseStorage.databaseInstance?.menuItemDao()?.getAll()?.observeAsState(
        emptyList()
    )?.value

    var orderItems by remember {
        mutableStateOf(false)
    }

    Column(
        modifier = Modifier
            .padding(start = 12.dp, end = 12.dp, top = 5.dp, bottom = 15.dp)
            .fillMaxWidth(),
    ) {
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(top = 7.dp, bottom = 10.dp)
                .fillMaxWidth()
        ) {
            Column {
                

            Image(
                painter = painterResource(id = R.drawable.hero_image),
                contentDescription = "Upper Panel Image",
                modifier = Modifier
                    .size(130.dp, 130.dp)
                    .clip(RoundedCornerShape(15.dp))
            )
        }

        var searchPhrase by remember {
            mutableStateOf("")
        }

        Column {
            TextField(
                value = searchPhrase,
                placeholder = { Text(text = "Enter Search Phrase") },
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                keyboardOptions = KeyboardOptions.Default.copy(
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(
                    onDone = {
                        keyboardController?.hide()
                    }
                ),
                onValueChange = { newValue ->
                    searchPhrase = newValue
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(align = Alignment.Center)
                    .background(Color.White),
                singleLine = true,
            )
            // Display filtered menu items
            if (searchPhrase.isNotEmpty()) {
                menuItems = menuItems?.filter { it.title.contains(searchPhrase, ignoreCase = true) }
            }

            menuItems?.let { LowerPanel(it) }

            Button( onClick = { orderItems = true }){
                Text(text = "Show")
            }
        }

    }

这是另一个可组合项

@Composable
private fun LowerPanel(items: List<MenuItemRoom>) {

    LazyColumn(
        modifier = Modifier
            .fillMaxHeight()
            .padding(top = 5.dp)
    ) {
        items(
            items = items,
            itemContent = { item ->

                Card(
                    onClick = {
                    }, modifier = Modifier
                        .fillMaxWidth()
                        .padding(5.dp),
                    colors = CardDefaults.cardColors(Color.Transparent)
                ) {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(5.dp)
                    ) {
                        Column {
                            Text(
                                text = item.title,
                                style = MaterialTheme.typography.titleMedium
                            )
                            Text(
                                text = item.description,
                                style = MaterialTheme.typography.bodySmall,
                                modifier = Modifier
                                    .padding(top = 5.dp, bottom = 5.dp)
                                    .fillMaxWidth(.70f)
                            )
                            Text(
                                text = "$${item.price}",
                                style = MaterialTheme.typography.bodyMedium,
                            )
            }
        )
    }

}

在UpperPanel()中，没有出现带有文字“Show”的按钮。我尝试将它们放在不同的列中，但它仍然是相同的。如何更改代码以显示文本字段下方的按钮？

Answer 1

如果你查看 LazyColumn 的修饰符，你会发现你使用了 .fillMaxHeight()。这会导致它与底部按钮重叠。如果您使用 .height(100.dp) 而不是 fillMaxHeight() （您可以根据需要调整 100 dp），该按钮将变得可见。