FocusRequester 未使用 M3 中的 ExposedDropdownMenuBox 进行初始化

Question

将构建 gradle 更新为compose_version 1.4.2“androidx.compose.material3:material3:1.0.1”后。我收到以下错误。

FocusRequester 未初始化。以下是一些可能的修复方法：

1. 记住 FocusRequester：val focusRequester = remember { FocusRequester() }
2. 您是否忘记添加一个Modifier.focusRequester()？
3. 您是否试图在构图​​过程中要求焦点？应针对某些事件发出焦点请求。例如Modifier.clickable { focusRequester.requestFocus() }

此代码在更新之前有效。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EditLocationsScreen(
    navController: NavHostController,
    casinoViewModel: CasinoViewModel
) {

    Scaffold(
        topBar = { LocationTopBar(navController = navController)}   )
    { paddingValues ->
        Spacer(modifier = Modifier.height(10.dp))
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            var expanded by remember { mutableStateOf(false) }
            val casinoNames by casinoViewModel.casinoNames.collectAsState(emptyList())
            var name by remember { mutableStateOf("") }
            val focusRequester = remember { FocusRequester() }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 10.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = "Name",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .padding(10.dp)
                        .align(Alignment.CenterVertically)
                )
                ExposedDropdownMenuBox(
                    expanded = expanded,
                    onExpandedChange = { expanded = !expanded },
                    modifier = Modifier
                        .weight(1f)
                        .padding(horizontal = 10.dp)
                ) {
                    OutlinedTextField(
                        label = { Text(text = "Enter Location") },
                        value = name,
                        onValueChange = { name = it },
                        modifier = Modifier
                            .padding(10.dp)
                            .align(Alignment.CenterVertically)
                            .focusRequester(focusRequester)
                    )

                    ExposedDropdownMenu(
                        expanded = expanded,
                        onDismissRequest = { expanded = false }
                    ) {
                        casinoNames.forEach { casino ->
                            DropdownMenuItem(
                                onClick = {
                                    expanded = false
                                    name = casino.name
                                },
                                text = { Text(text = casino.name) }
                            )
                        }
                    }
                }
            }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 10.dp),
            ) {
                Button(
                    onClick = {
                        expanded = true
                        casinoViewModel.insertCasino(name, casinoNames)
                        name = ""
                    },
                    modifier = Modifier
                        .padding(10.dp)
                        .weight(1f)
                ) {
                    Text(text = "Add new Casino")
                }
                Button(
                    onClick = {
                        expanded = true
                        casinoViewModel.removeCasino(name, casinoNames)
                        name = ""
                    },
                    modifier = Modifier
                        .padding(10.dp)
                        .weight(1f)
                ) {
                    Text(text = "Delete Casino")
                }
            }
        }

    }
}

我添加了focusRequester和 修饰符，但仍然出现相同的错误。还需要什么？当我点击添加按钮时它崩溃了。

Answer 1

在 M3 中，使用时需要传递Modifier.menuAnchor()到文本字段ExposedDropdownMenuBox。来自文档：

应向TextField内部内容传递修饰符ExposedDropdownMenuBoxScope.menuAnchor以获得正确的菜单行为。

ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = !expanded },
) {
    OutlinedTextField(
        value = name,
        onValueChange = { name = it },
        modifier = Modifier
            .menuAnchor()
    )

    ExposedDropdownMenu(
        //...
}