Android Jetpack Compose：清空OutlinedTextField文本时应用崩溃

问题分析 #

崩溃堆栈java.lang.IllegalArgumentException: width and height must be > 0仅在输入CVV后点击Switch再清空文本时触发，直接清空无异常，说明问题和组件状态联动后的重组测量有关。结合Compose 1.1.0版本特性，大概率是旧版本TextField在状态快速变化时的布局测量bug，或自定义封装/掩码逻辑导致的状态异常。

排查与解决方案 #

1. 检查自定义EditText的状态联动 #

• 确保TextField的value和onValueChange与ViewModel状态正确绑定，优先使用MutableStateFlow或rememberSaveable管理输入状态，避免重组时状态不一致导致布局计算异常。
• 清空文本时，确认状态更新逻辑没有触发异常值（比如空字符串之外的非法状态），例如掩码处理函数在文本为空时需返回合法空值，不能返回null或无效格式。

2. 添加组件最小尺寸约束 #

强制OutlinedTextField保持合法尺寸范围，避免重组时测量出0值：

@Composable
fun CustomCvvTextField(
    value: String,
    onValueChange: (String) -> Unit,
) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = Modifier
            .sizeIn(minWidth = 64.dp, minHeight = 56.dp), // 强制最小宽高
        label = { Text("CVV") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
    )
}

3. 升级Compose版本 #

Compose 1.1.x系列存在多处TextField布局测量相关的已知bug，升级到1.2.0及以上版本可直接修复大部分此类问题。修改build.gradle中的依赖：

// 替换原Compose依赖
implementation "androidx.compose.ui:ui:1.2.1"
implementation "androidx.compose.material:material:1.2.1"

4. 延迟状态更新（临时规避） #

如果暂时无法升级版本，可在清空文本时添加短暂延迟，确保组件完成重组后再更新状态：

// ViewModel中清空CVV的逻辑
fun clearCvv() {
    viewModelScope.launch {
        delay(10) // 等待组件完成当前重组周期
        _cvvValue.value = ""
    }
}

5. 排查掩码逻辑 #

如果CVV输入使用了自定义掩码处理，检查清空文本时的格式化逻辑：

• 确保掩码函数在输入为空时返回空字符串，而非触发异常的格式。
• 避免在文本清空时执行可能导致组件尺寸突变的逻辑。

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