如何解决Jetpack Compose中TextField按回车不清除文本反而换行的问题

用户实现的TextField代码如下：

@Composable
fun AppSearchBar() {
    val appSearchViewModel: AppSearchViewModel by lazy {
        AppSearchViewModel.ViewModelProvider.provideAppSearchViewModel()
    }
    val searchText by appSearchViewModel.searchText.collectAsState()

    TextField(
        value = searchText,
        leadingIcon = { Icon(imageVector = Icons.Filled.Search, contentDescription = null) },
        modifier = Modifier
            .fillMaxWidth()
            .requiredHeight(APP_SEARCH_BAR_HEIGHT)
            .padding(MODIFIER_PADDING_10),
        onValueChange = { appSearchViewModel.onSearchTextChange(it) },
        placeholder = { Text(text = stringResource(R.string.app_drawer_search)) },
        shape = CircleShape,
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent
        ),
        keyboardOptions = KeyboardOptions.Default.copy(
            imeAction = ImeAction.Done
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                appSearchViewModel.onSearchTextClear()
            }
        ),
        singleLine = true
    )
}

按下回车键时，输入框没有清除文本，反而新增了一行。已尝试设置singleLine = true和maxLines = 1，也尝试将imeAction改为Search和Go，但均无效。

修复方案 #

1. 检查ViewModel中onSearchTextClear的实现 #

首先确认ViewModel的状态更新逻辑是否正确，必须确保searchText状态流被正确置空：

class AppSearchViewModel {
    private val _searchText = MutableStateFlow("")
    val searchText = _searchText.asStateFlow()

    fun onSearchTextClear() {
        // 确保此处正确将状态置空
        _searchText.value = ""
    }

    // 其他方法...
}

如果状态流没有发送空值，UI层的TextField就不会更新显示内容。

2. 阻止IME的默认换行行为 #

按下回车时，系统可能会执行默认的换行操作，需要在keyboardActions中手动隐藏键盘并阻止默认行为：

@Composable
fun AppSearchBar() {
    val appSearchViewModel: AppSearchViewModel by lazy {
        AppSearchViewModel.ViewModelProvider.provideAppSearchViewModel()
    }
    val searchText by appSearchViewModel.searchText.collectAsState()
    // 获取键盘控制器
    val keyboardController = LocalSoftwareKeyboardController.current

    TextField(
        value = searchText,
        leadingIcon = { Icon(imageVector = Icons.Filled.Search, contentDescription = null) },
        modifier = Modifier
            .fillMaxWidth()
            .requiredHeight(APP_SEARCH_BAR_HEIGHT)
            .padding(MODIFIER_PADDING_10),
        onValueChange = { appSearchViewModel.onSearchTextChange(it) },
        placeholder = { Text(text = stringResource(R.string.app_drawer_search)) },
        shape = CircleShape,
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent
        ),
        keyboardOptions = KeyboardOptions.Default.copy(
            imeAction = ImeAction.Done,
            // 明确指定键盘类型为单行文本
            keyboardType = KeyboardType.Text
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                appSearchViewModel.onSearchTextClear()
                // 隐藏软键盘
                keyboardController?.hide()
                // 阻止系统默认的换行行为
                return@KeyboardActions
            }
        ),
        singleLine = true,
        // 双重确保输入框限制为单行
        maxLines = 1
    )
}

3. 验证状态流的收集逻辑 #

确认searchText是StateFlow或MutableStateFlow，且在Compose中通过collectAsState()正确收集状态更新，避免因状态流类型错误导致UI不刷新。

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