当前位置:网站首页>Jetpack Compose - Use of TextField and OutlinedTextField (text box)
Jetpack Compose - Use of TextField and OutlinedTextField (text box)
2022-08-09 14:17:00 【lplj717】
TextField的构造
@Composable
fun TextField(
//输入的文本内容
value: String,
//Updating the text triggers the callback,类似EditText中addTextChangedListener
onValueChange: (String) -> Unit,
//样式
modifier: Modifier = Modifier,
//控制TextField的启用状态,false:Text fields are not editable or focusable
enabled: Boolean = true,
//控制TextField的可编辑状态
readOnly: Boolean = false,
//文字样式,类型为TextStyle
textStyle: TextStyle = LocalTextStyle.current,
//An optional label to display in the text field container
label: @Composable (() -> Unit)? = null,
//占位符,TextView中配置的hint属性一样,What needs to be noted is how andlabel一起使用,will be overwritten,It will only be displayed when the focus is obtained
placeholder: @Composable (() -> Unit)? = null,
//前导图标,icon before text
leadingIcon: @Composable (() -> Unit)? = null,
//trailing icon,icon after text
trailingIcon: @Composable (() -> Unit)? = null,
//Whether the current value is wrong
isError: Boolean = false,
//视觉转换,类似EditText中的inputType,实现VisualTransformationThis interface to implement some other transformations
visualTransformation: VisualTransformation = VisualTransformation.None,
//输入框类型.可以定义为return/search等
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
//输入框Enter键盘类型,The callback for the keyboard return key
keyboardActions: KeyboardActions = KeyboardActions(),
//是否单行
singleLine: Boolean = false,
//最大行
maxLines: Int = Int.MAX_VALUE,
//Component interaction changes
//interactionSource Properties that handle state,比如按下的时候什么效果,正常时候什么效果,What is the effect when the focus is obtained, etc.类似之前再布局文件里写Selector.
//interactionSource.collectIsPressedAsState() 判断是否按下状态
//interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态
//interactionSource.collectIsDraggedAsState() 判断是否拖动
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
//文本框形状
shape: Shape =
MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
//文字,Cursor and other colors
colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)
由于OutlinedTextField和TextField属性差不多,So no more comments
@Composable
fun OutlinedTextField(
value: TextFieldValue,
onValueChange: (TextFieldValue) -> Unit,
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,
isError: Boolean = false,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions(),
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small,
colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
)
Next, look at the basic use:
TextField(value = "Ellen Li", onValueChange = {}, label = { Text(text = "userName") })
效果如图:
出现问题:The textbox content has not been changed,The focus is now available,But the modified text is not displayed in the textbox,换句话说就是TextField不可用,这就和EditText不同,TextFieldAsk us to handle content update issues ourselves,So let's deal with it:(注意定义的textVariables are observable variables)
var text by remember {
mutableStateOf("")//Observable text
}
TextField(
value = text,//显示文本
onValueChange = { text = it },//文本修改
label = { Text(text = "userName") },
leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },//Picture before text
trailingIcon = {
Image(
painter = painterResource(id = R.mipmap.ico_clean),
contentDescription = null,
modifier = Modifier.clickable { text = "" })//按钮点击事件
},//Picture after text
)
效果如图:
OutlinedTextField基本使用:
var inputText by remember {
mutableStateOf("")//Observable text
}
OutlinedTextField(
value = inputText,
onValueChange = { inputText = it },
label = { Text(text = "这里是标签") },
placeholder = { Text(text = "请输入内容") },
trailingIcon = {
Image(
painter = painterResource(id = R.mipmap.ico_clean),
contentDescription = null,
modifier = Modifier.clickable { inputText = "" })//按钮点击事件
}
)
效果如图:
Next, we will introduce the view changes:visualTransformation
var inputT by remember {
mutableStateOf("")//输入文本
}
var isVisible by remember {
mutableStateOf(false)//Whether the password is displayed
}
//Defines the visible transformation
val myVisibleTransform =
if (isVisible) VisualTransformation.None else PasswordVisualTransformation()
TextField(
value = inputT,
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
onValueChange = { value -> inputT = value },
visualTransformation = myVisibleTransform,
trailingIcon = {
//根据表示不同,显示不同的图标
if (isVisible) {
IconButton(onClick = {
isVisible = !isVisible
}) {
Icon(painter = painterResource(id = R.mipmap.icon_visible), null)
}
} else {
IconButton(onClick = {
isVisible = !isVisible
}) {
Icon(painter = painterResource(id = R.mipmap.icon_invisible), null)
}
}
}
)
效果如图:
TextFieldA brief introduction to the base is here,Attach all the content code at the end:
@Composable
fun TestTextFiled() {
Column(
Modifier
.fillMaxWidth()
.padding(20.dp)
.verticalScroll(state = rememberScrollState())
) {
TextField(value = "Ellen Li", onValueChange = {}, label = { Text(text = "userName") })
var text by remember {
mutableStateOf("")//Observable text
}
TextField(
value = text,//显示文本
onValueChange = { text = it },//文本修改
label = { Text(text = "userName") },
leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },//Picture before text
trailingIcon = {
Image(
painter = painterResource(id = R.mipmap.ico_clean),
contentDescription = null,
modifier = Modifier.clickable { text = "" })//按钮点击事件
},//Picture after text
)
Spacer(modifier = Modifier.padding(5.dp))
var inputText by remember {
mutableStateOf("")//Observable text
}
OutlinedTextField(
value = inputText,
onValueChange = { inputText = it },
label = { Text(text = "这里是标签") },
placeholder = { Text(text = "请输入内容") },
trailingIcon = {
Image(
painter = painterResource(id = R.mipmap.ico_clean),
contentDescription = null,
modifier = Modifier.clickable { inputText = "" })//按钮点击事件
}
)
Spacer(modifier = Modifier.padding(5.dp))
var inputT by remember {
mutableStateOf("")//输入文本
}
var isVisible by remember {
mutableStateOf(false)//Whether the password is displayed
}
//Defines the visible transformation
val myVisibleTransform =
if (isVisible) VisualTransformation.None else PasswordVisualTransformation()
TextField(
value = inputT,
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
onValueChange = { value -> inputT = value },
visualTransformation = myVisibleTransform,
trailingIcon = {
//根据表示不同,显示不同的图标
if (isVisible) {
IconButton(onClick = {
isVisible = !isVisible
}) {
Icon(painter = painterResource(id = R.mipmap.icon_visible), null)
}
} else {
IconButton(onClick = {
isVisible = !isVisible
}) {
Icon(painter = painterResource(id = R.mipmap.icon_invisible), null)
}
}
}
)
}
}
边栏推荐
猜你喜欢
随机推荐
处理XML,dom4j的简单使用
CutefishOS系统默认自动桌面壁纸
浅谈CQRS模式
救火队员的行为准则
Process/Thread related in Sandbox - 1
初中级常见面试题
激光器如何养护才能远离结露没烦恼
PO、DO、TO、VO、DO、DTO、DAO、POJO都是什么?
DCT变换与反变换
openharmony容器组件之Badge
01_iTween_第一天--小球抛物线
An Offer 21. Adjust the array in order to make odd in even the front (loop invariant)
NC96 判断一个链表是否为回文结构
Jetpack Compose——TextField及OutlinedTextField(文本框)的使用
零基础学习CANoe Panel 设计目录
Realization of RTSP Protocol
机器学习web服务化实战:一次吐血的服务化之路 (转载非原创)
KMP方法
pyhook3简单应用(1)--实现截图保存功能
tianchi过往方法