如何在Jetpack Compose中修改TextField的指示器（下划线）宽度？

当然可以修改，主要通过自定义TextField的指示器组件实现，以下是两种常用方案：

方案一：自定义TextField的indicator参数 #

默认TextField的下划线由indicator参数控制，直接替换为自定义组件即可调整宽度：

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("输入框") },
    // 替换默认指示器
    indicator = { state ->
        val indicatorColor = if (state.isFocused) Color.Blue else Color.Gray
        Row(
            modifier = Modifier
                .fillMaxWidth(0.8f) // 设置下划线为父布局的80%，也可用width(200.dp)固定宽度
                .height(1.dp)
                .background(indicatorColor)
        )
    }
)

如果需要保留默认指示器的交互细节（比如聚焦时高度变化），可以参考TextFieldDefaults.indicator的源码逻辑，调整其中的宽度约束。

方案二：使用BasicTextField完全自定义 #

BasicTextField允许完全控制装饰布局，直接添加自定义宽度的下划线：

var text by remember { mutableStateOf("") }
val focusManager = LocalFocusManager.current

BasicTextField(
    value = text,
    onValueChange = { text = it },
    decorationBox = { innerTextField ->
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            // 显示输入区域
            innerTextField()
            // 自定义下划线
            Divider(
                color = if (focusManager.hasFocus) Color.Blue else Color.Gray,
                thickness = 1.dp,
                modifier = Modifier.width(250.dp) // 固定下划线宽度
            )
        }
    }
)

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