Compose 组件 - 输入框 TextField、OutlinedTextField、BasicTextField

一、概念二、输入框 TextField基于值Composablefun TextField(value: String, //文本内容onValueChange: (String) - Unit, //内容变化后的回调it是新的内容modifier: Modifier Modifier,enabled: Boolean true, //是否启用readOnly: Boolean false, //只读的话不可编辑可复制点击获取焦点不会弹键盘textStyle: TextStyle LocalTextStyle.current, //设置文本样式label: Composable (() - Unit)? null, //显示在输入框边框上的提示文本placeholder: Composable (() - Unit)? null, //内容为空时的提示文本leadingIcon: Composable (() - Unit)? null, //左边图标trailingIcon: Composable (() - Unit)? null, //右边图标prefix: Composable (() - Unit)? null, //前缀suffix: Composable (() - Unit)? null, //后缀supportingText: Composable (() - Unit)? null, //输入框下面显示的文本isError: Boolean false,//内容可见性不可见是PasswordVisualTransformation()visualTransformation: VisualTransformation VisualTransformation.None,keyboardOptions: KeyboardOptions KeyboardOptions.Default, //键盘选项keyboardActions: KeyboardActions KeyboardActions.Default, //键盘监听singleLine: Boolean false, //单行设为true会忽略maxLinesmaxLines: Int if (singleLine) 1 else Int.MAX_VALUE, //最大行数minLines: Int 1, //最小行interactionSource: MutableInteractionSource? null, //状态监听shape: Shape TextFieldDefaults.shape, //背景形状colors: TextFieldColors TextFieldDefaults.colors(), //设置颜色)基于状态Composablefun TextField(state: TextFieldState,modifier: Modifier Modifier,enabled: Boolean true,readOnly: Boolean false,textStyle: TextStyle LocalTextStyle.current,labelPosition: TextFieldLabelPosition TextFieldLabelPosition.Attached(),label: Composable (TextFieldLabelScope.() - Unit)? null,placeholder: Composable (() - Unit)? null,leadingIcon: Composable (() - Unit)? null,trailingIcon: Composable (() - Unit)? null,prefix: Composable (() - Unit)? null,suffix: Composable (() - Unit)? null,supportingText: Composable (() - Unit)? null,isError: Boolean false,inputTransformation: InputTransformation? null,outputTransformation: OutputTransformation? null,keyboardOptions: KeyboardOptions KeyboardOptions.Default,onKeyboardAction: KeyboardActionHandler? null,lineLimits: TextFieldLineLimits TextFieldLineLimits.Default,onTextLayout: (Density.(getResult: () - TextLayoutResult?) - Unit)? null,scrollState: ScrollState rememberScrollState(),shape: Shape TextFieldDefaults.shape,colors: TextFieldColors TextFieldDefaults.colors(),contentPadding: PaddingValues if (label null || labelPosition is TextFieldLabelPosition.Above) {TextFieldDefaults.contentPaddingWithoutLabel()} else {TextFieldDefaults.contentPaddingWithLabel()},interactionSource: MutableInteractionSource? null,)var str by remember{ mutableStateOf(123456) } TextField( value str, //文本内容 onValueChange { str it }, //内容变化后的回调it是新的内容 modifier Modifier, enabled true, //是否启用 readOnly false, //只读的话不可编辑可复制点击获取焦点不会弹键盘 textStyle LocalTextStyle.current, //设置文本样式 label { Text(text 标签文本) }, //显示在输入框边框上的提示文本 placeholder { Text(text 提示文本) }, //内容为空时的提示文本 leadingIcon { Icon(imageVector Icons.Default.Home, contentDescription null) }, //左边图标 trailingIcon { Icon(imageVector Icons.Default.Star, contentDescription null) }, //右边图标 prefix: Composable (() - Unit)? null, //前缀 suffix: Composable (() - Unit)? null, //后缀 supportingText { Text(text 输入框下面显示的文本) }, isError false, visualTransformation VisualTransformation.None, //内容可见性不可见是PasswordVisualTransformation() singleLine false, //单行设为true会忽略maxLines maxLines 5, //最大行数 minLines: Int 1, //最小行 keyboardOptions: KeyboardOptions KeyboardOptions.Default, //键盘选项 keyboardActions: KeyboardActions KeyboardActions.Default, //键盘监听 interactionSource: MutableInteractionSource remember { MutableInteractionSource() }, //状态监听 shape TextFieldDefaults.filledShape, //背景形状 colors TextFieldDefaults.textFieldColors() //设置颜色 )基于状态val state rememberTextFieldState() TextField( state state )2.1 字体大小 textStyletextStyle TextStyle.Default.copy(fontSize 20.sp)2.2 颜色设置 color大多数都有四种状态选中focused、未选中unfocused、不可用disabled、错误error。输入的文字颜色***TextColor背景***ContainerColor光标***cursorColor输入框下方横线、边框***IndicatorColor标签***LabelColor输入框下方文字***SupportingTextColor无内容提示文字***PlaceholderColor左侧图标***LeadingIconColor右侧图标***TrailingIconColor前缀***PrefixColor后缀***SuffixColorcolors TextFieldDefaults.colors( //输入的文字颜色 focusedTextColor Color.black, unfocusedTextColor Color.gray, disabledTextColor Color.gray errorTextColor Color.red, //光标 cursorColor Color.black, errorCursorColor Color.red, )2.3 键盘选项 keyboardOptionsKeyboardType输入类型Text //文本Ascii //ASCII字符Number //数字Phone //电话Uri //uriEmail //邮件Password //密码NumberPassword //数字密码ImeAction键盘右下角按键类型UnspecifiedNoActionGoSearchSendPreviousNextDoneKeyboardCapitalization字母大写Sentences //当输入英文时候将每个字母的第一个字符大写Words //当输入英文的时候将每个字母的第一个字符小写None //不自动大小写Characters //将所有的字符大写keyboardOptions KeyboardOptions( keyboardType KeyboardType.Text, //输入类型 imeAction ImeAction.Next, //键盘类型 autoCorrect true, //自动更正保持默认就行 capitalization KeyboardCapitalization.Sentences //字母大写 )2.4 键盘监听 keyboardActions监听点击了哪种 ImeAction。keyboardActions KeyboardActions( onDone {}, onGo {}, onNext {}, onPrevious {}, onSearch {}, onSend {} )2.5 状态监听 interactionSource是否按下interactionSource.collectIsPressedAsState()是否获取焦点interactionSource.collectIsFocusedAsState()是否拖动interactionSource.collectIsDraggedAsState()val interactionSource remember { MutableInteractionSource() } val pressState by interactionSource.collectIsPressedAsState() TextField( value if (pressState) 按下 else 未按下, interactionSource interactionSource )2.6 小眼睛隐藏密码显示 visualTransformationComposable fun Demo( enableEye: Boolean ) { var isPasswordVisiable by remember { mutableStateOf(false) } TextField( trailingIcon { if (enableEye) { Icon ( modifier Modifier.clickable( indication null, interactionSource remember { MutableInteractionSource() }, onClick { isPasswordVisiable !isPasswordVisiable } ), painter painterResource(if (isPasswordVisiable) R.drawable.icon_visiable else R.drawable.icon_invisiable), ) } }, visualTransformation if (enableEye isPasswordVisiable) PasswordVisualTransformation() else VisualTransformation.None, keyboardOptions if (enableEye) KeyboardOptions(keyboardType KeyboardType.Password) else KeyboardOptions.Default, ) }2.7 焦点管理焦点操作需在Compose的协程作用域或主线程执行避免子线程调用。清空焦点 clearFocus() 会同时隐藏软键盘是关闭软键盘的常用方式。FocusRequester焦点请求器绑定到 TextField 的 Modifier通过 requestFocus()、freeFocus() 主动控制焦点。LocalFocusManager焦点管理器全局焦点管理器支持在多个组件间切换焦点、清空焦点隐藏键盘。2.7.1 自动获取焦点val focusRequester remember { FocusRequester() } TextField( modifier Modifier.focusRequester(focusRequester) ) LaunchedEffect(Unit) { focusRequester.requestFocus() } //调用写在输入框下面如果写在上面最好加个delay2.7.2 切换焦点val focusManager LocalFocusManager.current TextField( keyboardActions KeyboardActions( onDone { focusManager.moveFocus(FocusDirection.Down) } ) ) TextField( keyboardActions KeyboardActions( onDone { focusManager.clearFocus() } ) )2.8 键盘显示隐藏val softKeyboard LocalSoftwareKeyboardController.current LaunchedEffect(Unit) { softKeyboard?.show() //显示 softKeyboard?.hhide() //隐藏 }2.9 自动填充 Autofill为 TextField 启用自动填充功能后系统即会在用户离开相应页面时自动保存凭据信息。用户点击启用了自动填充功能的 TextField 后如果系统存储了相关数据则用户会在键盘上方的工具栏中看到用来点击填充的标签。用户名Username密码Password地址AddressCountry 国家AddressRegion 省/州AddressLocality 县/市生日BirthDateFullBirthDateYearBirthDateMonthBirthDateDayEmailEmailAddress性别Gender名字PersonFullName 全名PersonFirstName 姓氏PersonLastName 名字PersonMiddleName 中间名PersonNamePrefix 前缀PersonNameSuffix 后缀电话PhoneCountryCode 国家码PhoneNumber 号吗邮编PostalAddress 邮编地址PostalCode 邮编号吗TextField( modifier Modifier.semantics { contentType ContentType.Username // 当某个字段符合多个类型时可以通过 运算符拼接。 // contentType ContentType.Username ContentType.EmailAddress } ) val autofill LocalAutofill.current Button({ autofill?.commit() }) { Text(提交并保存) }三、带边框的输入框 OutlinedTextField代码可设置的内容同 TextField 一样。四、基本输入框 BasicTextField可设置内容少适合自定义。innerTextField() 是输入框的实现必须并且也只能调用一次这个函数在 decorationBox{ } 中通过自定义 innerTextField() 的调用位置等方式实现自定义自己需要的文本框的目的。一般使用fun BasicTextField(value: String,onValueChange: (String) - Unit,modifier: Modifier Modifier,enabled: Boolean true, //是否启用readOnly: Boolean false, //是否只读不可编辑可复制textStyle: TextStyle TextStyle.Default, //设置文本样式keyboardOptions: KeyboardOptions KeyboardOptions.Default, //输入类型keyboardActions: KeyboardActions KeyboardActions.Default, //键盘监听singleLine: Boolean false, //单行设为true会忽略maxLinesmaxLines: Int if (singleLine) 1 else Int.MAX_VALUE, //最大行数minLines: Int 1, //最小行数visualTransformation: VisualTransformation VisualTransformation.None,onTextLayout: (TextLayoutResult) - Unit {},interactionSource: MutableInteractionSource remember { MutableInteractionSource() },cursorBrush: Brush SolidColor(Color.Black),decorationBox: Composable (innerTextField: Composable () - Unit) - Unit Composable { innerTextField - innerTextField() })样式转换fun BasicTextField(state: TextFieldState,modifier: Modifier Modifier,enabled: Boolean true,readOnly: Boolean false,inputTransformation: InputTransformation? null,textStyle: TextStyle TextStyle.Default,keyboardOptions: KeyboardOptions KeyboardOptions.Default,onKeyboardAction: KeyboardActionHandler? null,lineLimits: TextFieldLineLimits TextFieldLineLimits.Default,onTextLayout: (Density.(getResult: () - TextLayoutResult?) - Unit)? null,interactionSource: MutableInteractionSource? null,cursorBrush: Brush BasicTextFieldDefaults.CursorBrush,outputTransformation: OutputTransformation? null,decorator: TextFieldDecorator? null,scrollState: ScrollState rememberScrollState(),)用 SpanStyle 或 ParagraphStyle 来更改文本外观而无需改变底层的 TextFieldState。这对于以视觉方式格式化输入内容 (如电话号码或信用卡号) 非常有用。4.1 添加 HintComposable fun BasicInputBox( value: String, onValueChange: (String) - Unit, modifier: Modifier Modifier, hint: String , singleLine: Boolean true, keyboardOptions: KeyboardOptions KeyboardOptions.Default, ) { BasicTextField( modifier modifier, value value, onValueChange onValueChange, keyboardOptions keyboardOptions, singleLine singleLine, textStyle TextStyle.Default.copy(color AppColors.Black, fontSize AppDimens.textPrimary), decorationBox { innerTextField - Row( modifier Modifier.padding(horizontal AppDimens.marginContent), verticalAlignment Alignment.CenterVertically ) { Box(contentAlignment Alignment.CenterStart) { if (value.isEmpty()) { Text( text hint, color AppColors.Hint, fontSize AppDimens.textPrimary, textAlign TextAlign.Center ) } innerTextField() } } } ) }4.2 变富文本Composable fun Demo() { val state remember { TextFieldState() } val outputTransformation OutputTransformation { //效果1234567890 - (123) 456-7890 if (length 10) { insert(0, () insert(4, ) ) insert(9, -) } //为添加的标点符号着色 val gray Color(0xFF666666) addStyle(SpanStyle(color gray), 0, 1) addStyle(SpanStyle(color gray), 4, 5) addStyle(SpanStyle(color gray), 9, 10) } BasicTextField( state state, outputTransformation outputTransformation ) }