Jetpack Compose - TextField

Jetpack Compose - TextField

1、属性一览

关于输入框，官方提供了两种类型，TextField和OutlinedTextFiedl。
先看下两种输入框最简单的效果，上面是普通的TextField效果，跟之前的EditText默认效果一致，第二种是OutlinedTextField效果，带有一个边框：

首先看下TextField的两个函数，链接在这里：

@Composable fun TextField(
    value: String, 
    onValueChange: (String) -> Unit, 
    modifier: Modifier = Modifier, 
    textStyle: TextStyle = AmbientTextStyle.current, 
    label: () -> Unit = null, 
    placeholder: () -> Unit = null, 
    leadingIcon: () -> Unit = null, 
    trailingIcon: () -> Unit = null, 
    isErrorValue: Boolean = false, 
    visualTransformation: VisualTransformation = VisualTransformation.None, 
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, 
    singleLine: Boolean = false, 
    maxLines: Int = Int.MAX_VALUE, 
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, 
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, 
    interactionState: InteractionState = remember { InteractionState() }, 
    activeColor: Color = MaterialTheme.colors.primary, 
    inactiveColor: Color = MaterialTheme.colors.onSurface, 
    errorColor: Color = MaterialTheme.colors.error, 
    backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContainerAlpha), 
    shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize)
): Unit

@Composable fun TextField(
    value: TextFieldValue, 
    onValueChange: (TextFieldValue) -> Unit, 
    modifier: Modifier = Modifier, 
    textStyle: TextStyle = AmbientTextStyle.current, 
    label: () -> Unit = null, 
    placeholder: () -> Unit = null, 
    leadingIcon: () -> Unit = null, 
    trailingIcon: () -> Unit = null, 
    isErrorValue: Boolean = false, 
    visualTransformation: VisualTransformation = VisualTransformation.None, 
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, 
    singleLine: Boolean = false, 
    maxLines: Int = Int.MAX_VALUE, 
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, 
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, 
    interactionState: InteractionState = remember { InteractionState() }, 
    activeColor: Color = MaterialTheme.colors.primary, 
    inactiveColor: Color = MaterialTheme.colors.onSurface, 
    errorColor: Color = MaterialTheme.colors.error, 
    backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContainerAlpha), 
    shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize)
): Unit

接着是OutlinedTextField的两个函数，链接在这里：

@Composable fun OutlinedTextField(
    value: String, 
    onValueChange: (String) -> Unit, 
    modifier: Modifier = Modifier, 
    textStyle: TextStyle = AmbientTextStyle.current, 
    label: () -> Unit = null, 
    placeholder: () -> Unit = null, 
    leadingIcon: () -> Unit = null, 
    trailingIcon: () -> Unit = null, 
    isErrorValue: Boolean = false, 
    visualTransformation: VisualTransformation = VisualTransformation.None, 
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, 
    singleLine: Boolean = false, 
    maxLines: Int = Int.MAX_VALUE, 
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, 
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, 
    interactionState: InteractionState = remember { InteractionState() }, 
    activeColor: Color = MaterialTheme.colors.primary, 
    inactiveColor: Color = MaterialTheme.colors.onSurface, 
    errorColor: Color = MaterialTheme.colors.error
): Unit

@Composable fun OutlinedTextField(
    value: TextFieldValue, 
    onValueChange: (TextFieldValue) -> Unit, 
    modifier: Modifier = Modifier, 
    textStyle: TextStyle = AmbientTextStyle.current, 
    label: () -> Unit = null, 
    placeholder: () -> Unit = null, 
    leadingIcon: () -> Unit = null, 
    trailingIcon: () -> Unit = null, 
    isErrorValue: Boolean = false, 
    visualTransformation: VisualTransformation = VisualTransformation.None, 
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, 
    singleLine: Boolean = false, 
    maxLines: Int = Int.MAX_VALUE, 
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, 
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, 
    interactionState: InteractionState = remember { InteractionState() }, 
    activeColor: Color = MaterialTheme.colors.primary, 
    inactiveColor: Color = MaterialTheme.colors.onSurface, 
    errorColor: Color = MaterialTheme.colors.error
): Unit

2、使用示例

接下来请看一段示例代码

3、未解决问题