Skip to content

Input 输入框 ​

受控单行输入框,支持尺寸、禁用、只读、清除、密码遮罩与最大长度。

契约源:lh-ui-core/specs/input.json · 黄金用例:cases/input.json(8 条,已翻译为 JVM 单测 + Compose UI Test)

基本用法 ​

9:41Input

HTML 模拟预览(Android / Compose 外观),非真机渲染

kotlin
var value by remember { mutableStateOf("") }
LhInput(
  value = value,
  placeholder = "请输入内容",
  onValueChange = { value = it },
)

尺寸与焦点 ​

三档尺寸映射到 input.height / input.paddingHorizontal / input.fontSize 令牌;聚焦时描边取 color.focus 并加宽到 input.focusRingWidth。

9:41Input 尺寸

HTML 模拟预览(Android / Compose 外观),非真机渲染

API ​

Props ​

属性说明类型默认值
value受控值(必填)String—
onValueChange值变更回调(必填)(String) -> Unit—
placeholder占位文字String?null
type输入类型(明文 / 密码)LhInputTypeText
size尺寸LhInputSizeMedium
disabled是否禁用Booleanfalse
readonly是否只读(不可编辑但不禁用样式)Booleanfalse
clearable是否显示清除按钮Booleanfalse
maxlength最大长度(超长截断)IntInt.MAX_VALUE
onFocus / onBlur聚焦 / 失焦回调(() -> Unit)?null
prefix / suffix前缀 / 后缀插槽@Composable (() -> Unit)?null
modifier修饰符ModifierModifier

LhInputSize ​

值heightpaddingHorizontalfontSize
Smallinput.height.small(32dp)input.paddingHorizontal.small(12dp)input.fontSize.small(13sp)
Mediuminput.height.medium(40dp)input.paddingHorizontal.medium(16dp)input.fontSize.medium(14sp)
Largeinput.height.large(48dp)input.paddingHorizontal.large(20dp)input.fontSize.large(16sp)

令牌对照 ​

令牌用途
input.height.{small,medium,large}三档高度
input.paddingHorizontal.{small,medium,large}三档横向内边距
input.fontSize.{small,medium,large}三档字号
input.borderRadius / input.borderWidth / input.focusRingWidth圆角 / 描边宽 / 焦点描边宽
input.clearIconSize清除图标尺寸
color.focus焦点描边色
color.text.placeholder占位文字色
color.border.base默认描边色
color.disabled.{bg,text,border}禁用态三色

黄金用例对照 ​

case id断言本地测试
input-emits-onvaluechange输入触发 onValueChangeLhInputTest.input_emits_onValueChange(Compose UI Test)
clearable-emits-empty-value清除按钮发射空值LhInputTest.clearable_emits_empty_value
disabled-blocks-input禁用态不可输入LhInputTest.disabled_blocks_input
readonly-blocks-input只读态不可输入LhInputTest.readonly_blocks_input
placeholder-uses-placeholder-token占位色取占位令牌LhInputDefaultsTest.placeholder_uses_placeholder_token
focus-uses-focus-token聚焦消费焦点令牌(失焦取中性描边)LhInputDefaultsTest.focus_uses_focus_tokens + unfocused_uses_neutral_tokens
small-size-uses-small-tokens小号消费 small 尺寸令牌LhInputDefaultsTest.small_size_uses_small_tokens
maxlength-truncates-input超长输入截断LhInputTest.maxlength_truncates_input
bash
./gradlew :components:input:test                              # JVM 部分
./gradlew :components:input:connectedAndroidTest              # 交互部分(需设备)