如何设置/禁用OutlinedTextField焦点 解决圆角背景溢出问题

对应需求 #

• 支持两种焦点模式：OutlinedTextField 始终保持聚焦，或完全禁用聚焦能力
• 配置 RoundedCornerShape 圆角样式时，解决内容溢出圆角范围的异常

实现方案 #

1. 焦点控制逻辑 #

两种场景分别对应不同实现，不要混用：

• 完全禁用聚焦：给组件同时设置 readOnly = true 和 enabled = false 即可，此时组件完全不响应焦点事件，也不会触发软键盘弹出。注意要在colors参数里单独配置禁用状态下的文字、图标、边框颜色，覆盖默认禁用态的低透明度灰色样式，保证内容显示正常。
• 始终保持聚焦：借助FocusRequester实现：
  1. 组合内声明val focusRequester = remember { FocusRequester() }
  2. 给输入框的Modifier追加.focusRequester(focusRequester)和.onFocusChanged { focusState -> if (!focusState.isFocused) focusRequester.requestFocus() }
  3. 在LaunchedEffect(Unit)中调用focusRequester.requestFocus()，实现页面进入时自动获取焦点，后续失焦时也会自动重新请求。

2. 圆角溢出修复 #

溢出的核心原因有两个：

• Modifier 调用顺序错误：Compose 的 Modifier 是按链式调用顺序依次生效的，原代码先绘制背景、后执行裁剪，会导致背景绘制在裁剪区域外，出现边角溢出
• OutlinedTextField 默认自带不透明背景，和外层容器的背景叠层时会突破圆角限制
  修复方式：调整Modifier顺序为先裁剪、后绘制背景，同时将输入框自身的背景设为透明，统一使用外层容器的背景即可。

修正后完整代码 #

Column(modifier = Modifier
    .weight(1f)
    // 注意顺序：先执行裁剪，再绘制背景
    .clip(RoundedCornerShape(35.dp))
    .background(Color.Gray)
) {
    OutlinedTextField(
        value = "12",
        onValueChange = {},
        readOnly = true,
        // 不需要常聚焦就保留这行实现完全禁用聚焦；需要常聚焦就删除这行，追加下方注释的焦点相关代码
        enabled = false,
        shape = RoundedCornerShape(35.dp),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            // 按需自定义颜色，禁用态下把边框设为透明和外层背景融合
            disabledBorderColor = Color.Transparent,
            disabledTextColor = Color.Black,
            disabledLeadingIconColor = Color.Black,
            // 输入框自身背景设为透明，避免叠层溢出
            backgroundColor = Color.Transparent
        ),
        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
        leadingIcon = { Icon(painter = painterResource(id = R.drawable.ic_coin), contentDescription = null)},
        modifier = Modifier.fillMaxWidth()
            // 常聚焦场景放开以下注释即可
            // .focusRequester(focusRequester)
            // .onFocusChanged { if (!it.isFocused) focusRequester.requestFocus() }
    )
}

// 常聚焦场景需要在组合作用域内添加以下代码
// val focusRequester = remember { FocusRequester() }
// LaunchedEffect(Unit) {
//     focusRequester.requestFocus()
// }

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