Jetpack Compose中OutlinedTextField无法自适应最小宽度包裹内容
Compose OutlinedTextField 实现随输入自适应的内容包裹宽度
OutlinedTextField默认会占满父布局给到的最大可用宽度,你之前试的固有尺寸配置不生效,核心是缺了必要的配套设置,按以下配置即可实现初始宽度匹配500g这类短文本、输入时自动伸缩宽度的效果:
- 必须设置
singleLine = true:多行模式下内部文本布局会优先占满可用宽度触发换行,不会触发按内容收缩的测量逻辑 - 覆盖组件默认最小尺寸限制:Material系组件默认带最小触控尺寸约束,默认minWidth在48dp以上,需要手动覆写
- 配置固有宽度测量:让组件宽度以内容的最小固有宽度为基准
- 可选配置最大宽度:避免输入过长内容时撑破外层布局
可直接复用的实现代码:
var inputText by remember { mutableStateOf("500g") } OutlinedTextField( value = inputText, onValueChange = { inputText = it }, singleLine = true, label = null, // 不需要固定标签就设为null,避免标签占位撑宽初始尺寸 modifier = Modifier .width(IntrinsicSize.Min) .defaultMinSize(minWidth = 1.dp) .widthIn(max = 240.dp) // 按需设置最大宽度,不需要可以删除这行 )
如果要保留标签又要初始宽度匹配输入内容,可以把常驻label替换成placeholder,或者仅在输入内容为空时显示label,避免标签的测量值撑宽组件。
之前尝试设置固定小宽度后无法自动扩张,是因为固定宽度Modifier会强制锁死测量约束,不会随内容测量结果更新尺寸。
内容的提问来源于stack exchange,提问作者David Aleksanyan
相关产品推荐
相关产品推荐

