Jetpack Compose中AutoCompleteTextField列表被软键盘遮挡问题求助

问题场景 #

在Kotlin+Jetpack Compose开发的表单页面中，AutoCompleteTextField从Room数据库加载候选列表，但列表始终被软键盘遮挡；若将列表移至TextField上方，又会出现TextField丢失焦点的问题，且输入字段位于可滚动Column内。

核心修复方案 #

• 配置窗口软键盘适配：让Activity在软键盘弹出时自动调整布局，避免内容被遮挡
• 添加键盘内边距：给候选列表容器添加内边距，避开软键盘区域
• 启用外层布局滚动：让包含AutoComplete的Column支持垂直滚动，方便用户滚动到列表区域
• 优化焦点管理：修复候选项点击时的焦点丢失问题，避免不必要的焦点清除

1. 配置Activity软键盘模式 #

在AndroidManifest.xml中对应Activity标签添加：

android:windowSoftInputMode="adjustResize"

或在Activity的onCreate方法中通过代码设置：

WindowCompat.setDecorFitsSystemWindows(window, false)

2. 修改AutoCompleteTextView组件 #

调整LazyColumn的修饰符，添加键盘内边距，并优化焦点处理逻辑：

@Composable
fun <T> AutoCompleteTextView(
    modifier: Modifier,
    value: String,
    label: String,
    onValueChanged: (String) -> Unit = {},
    predictions: List<T>,
    clearVisible: Boolean = true,
    keyBoardAction: ImeAction = ImeAction.Search,
    onActionClick: () -> Unit = {},
    onClearClick: () -> Unit = {},
    onItemClick: (T) -> Unit = {},
    itemContent: @Composable (T) -> Unit = {},
) {
    val lazyListState = rememberLazyListState()
    var showClearButton by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }

    LazyColumn(
        state = lazyListState,
        modifier = modifier
            .heightIn(max = TextFieldDefaults.MinHeight * 6)
            .imePadding() // 添加键盘内边距，避开软键盘区域
    ) {
        item {
            OutlinedTextField(
                modifier = modifier
                    .onFocusChanged { focusState ->
                        showClearButton = clearVisible && focusState.isFocused
                    }
                    .focusRequester(focusRequester),
                value = value,
                onValueChange = {
                    onValueChanged(it)
                    focusRequester.requestFocus()
                },
                label = { Text(text = label) },
                singleLine = true,
                trailingIcon = {
                    if (showClearButton) {
                        IconButton(
                            painter = painterResource(R.mipmap.ic_close),
                            contentDescription = stringResource(R.string.clear)
                        ) {
                            onClearClick()
                        }
                    }
                },
                keyboardActions = KeyboardActions(
                    onSearch = { onActionClick() },
                    onDone = { onActionClick() },
                    onGo = { onActionClick() },
                    onNext = { onActionClick() },
                    onPrevious = { onActionClick() },
                    onSend = { onActionClick() },
                ),
                keyboardOptions = KeyboardOptions(
                    imeAction = keyBoardAction,
                    keyboardType = KeyboardType.Text
                ),
                shape = RoundedCornerShape(10.dp),
                colors = TextFieldDefaults.colors(
                    focusedIndicatorColor = MaterialTheme.colorScheme.primaryContainer,
                    unfocusedIndicatorColor = MaterialTheme.colorScheme.secondaryContainer,
                    focusedContainerColor = Color.Transparent,
                    unfocusedContainerColor = Color.Transparent,
                    errorContainerColor = Color.Transparent
                )
            )
        }

        if (predictions.isNotEmpty()) {
            itemsIndexed(predictions) { _, element ->
                Row(
                    Modifier
                        .padding(5.dp)
                        .fillMaxWidth()
                        .clickable {
                            onItemClick(element)
                            // 移除强制清除焦点的逻辑，避免TextField意外失焦
                        }
                ) {
                    itemContent(element)
                }
            }
        }
    }
}

3. 修改Activity外层布局 #

让包含AutoComplete的Column支持垂直滚动，确保软键盘弹出时用户可以滚动到候选列表：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp)
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp),
        shape = RoundedCornerShape(10.dp),
        border = BorderStroke(1.dp, MaterialTheme.colorScheme.secondaryContainer)
    ) {
        // 启用外层Column的垂直滚动
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxWidth()
        ) {
            Row(modifier = Modifier.wrapContentWidth()) {
                Image(
                    modifier = Modifier
                        .padding(start = 15.dp, top = 20.dp, end = 10.dp)
                        .size(24.dp),
                    painter = painterResource(R.mipmap.ic_dice),
                    contentDescription = stringResource(R.string.genres)
                )
                Column(modifier = Modifier.wrapContentSize()) {
                    FlowRow(
                        modifier = Modifier
                            .wrapContentSize()
                            .padding(vertical = 6.dp),
                        horizontalArrangement = Arrangement.spacedBy(5.dp, Start),
                        verticalArrangement = Arrangement.Top
                    ) {
                        for (genre in genres) {
                            FilterChip(
                                modifier = Modifier.padding(horizontal = 5.dp),
                                onClick = { genres.remove(genre) },
                                selected = true,
                                trailingIcon = {
                                    Image(
                                        modifier = Modifier.size(15.dp),
                                        painter = painterResource(R.mipmap.ic_close),
                                        contentDescription = stringResource(R.string.delete)
                                    )
                                },
                                label = { Text(genre.name) }
                            )
                        }
                    }
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 10.dp)
                            .height(1.dp)
                            .background(MaterialTheme.colorScheme.secondaryContainer)
                    )
                    AutoCompleteTextView(
                        modifier = Modifier.padding(5.dp),
                        value = selectedGenreName,
                        label = "Genre",
                        onValueChanged = {
                            selectedGenreName = it
                            if (it.isNotEmpty()) {
                                getGenres(it)
                            } else {
                                filteredGenres.clear()
                            }
                        },
                        predictions = filteredGenres,
                        keyBoardAction = ImeAction.Done,
                        clearVisible = false,
                        onActionClick = {
                            val first = filteredGenres.firstOrNull { it.name == selectedGenreName }
                            if (first != null) {
                                genres.add(first)
                            } else {
                                genres.add(Genre().apply { name = selectedGenreName })
                            }
                            selectedGenreName = ""
                            filteredGenres.clear()
                        },
                        onItemClick = {
                            genres.add(it)
                            selectedGenreName = ""
                            filteredGenres.clear()
                        }
                    ) {
                        Text(text = it.name)
                    }
                }
            }
        }
    }
    Surface(
        modifier = Modifier.padding(start = 15.dp),
        color = MaterialTheme.colorScheme.background
    ) {
        Text(
            modifier = Modifier.padding(horizontal = 5.dp),
            text = stringResource(R.string.genres),
            fontSize = 14.sp
        )
    }
}

额外优化说明 #

• 用Kotlin风格的firstOrNull()替代Java Stream写法，简化代码逻辑
• 移除了原代码中不必要的渐变修饰符（若为自定义扩展函数可保留）
• 候选项点击时不再强制清除焦点，避免TextField意外失焦

内容的提问来源于stack exchange，提问作者Sebi