TextField

Compose 中的TextField，是文本输入框控件，样式为Android现有库中的EditText的样式，具体用法中会涉及到状态的使用

TextField 属性列表

属性	作用	示例
value	输入框内容	"hello"
onValueChange	输入框内容改变事件	{ //it 为改变后的文本}
placeholder	hint提示语	"请输入xxxxx"
backgroundColor	背景颜色	Color.Yellow
visualTransformation	输入内容的格式	PasswordVisualTransformation()//密码样式
leadingIcon	前面的图标	{ Icon(Icons.Filled.AccountBox) }
trailingIcon	后面的图标	{ Icon(Icons.Filled.AccountCircle)}
keyboardOptions	暂时不知道怎么用	KeyboardOptions(keyboardType = KeyboardType.Phone, imeAction =ImeAction.Done//ime行为)//设置了没有发现效果

代码实例

class TextFieldActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShowTextField()
        }
    }

    @Composable
    fun ShowTextField() {
        var text by savedInstanceState { "" }
        TextField(
            value = text,
            onValueChange = {
                text = it
            },//文本改变监听

            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),
//            label = { Text(text = "标签") },//顶部的提示语
            placeholder = { Text(text = "请输入内容") },//hint提示语
            backgroundColor = Color.Yellow,//背景颜色
            visualTransformation = PasswordVisualTransformation(),//输入样式
            leadingIcon = { Icon(Icons.Filled.AccountBox) },//前面的图标
            trailingIcon = {
                Icon(
                    Icons.Filled.AccountCircle,
                    modifier = Modifier.clickable(onClick = {
                        text = ""
                    })
                )
            },//后面的图标
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Phone,
                imeAction = ImeAction.Done//ime行为
            )
        )

    }
}

运行效果：

device-2021-02-03-215535.png

目前发现此控件在输入第一个字符和删除最后一个字符的时候，控件的高度会发生小距离的变化