foreword

The TextField in Jetpack Compose is easy to use, but it is not easy to implement if you want to customize the UI. Let's take a look at the effect:

TextField:

Similar to OutlinedTextField:

They all have the same api and features, easy to use and very convenient, but it has a large inner margin that is not easy to adjust, and its background ui is not easy to adjust (the background can be changed to transparent, but the spacing I checked the source code did not. to...)

Thanks to the basic input box implementation reserved in Compose: BasicTextField

No margins, no background, very suitable for us to customize the ui, so I encapsulated it based on BasicTextField to make the ui easier to use

text

First look at how to use and effect

Then there is a PasswordTextField suitable for password input encapsulated by GoodTextField

Then the api is basically the same as the ordinary TextFild, just briefly talk about the additional api

/**
 * 更方便易用的TextField(文本输入框)
 * [value]输入框中的文字
 * [onValueChange]输入框中文字的变化回调
 * [modifier]修饰
 * [hint]输入框没有文字时展示的内容
 * [maxLines]最多能展示多少行文字
 * [fontSize]text和hint的字体大小
 * [fontColor]text的字体颜色
 * [maxLength]最多能展示多少个文字,ps:由于会截断文字,会导致截断时重置键盘状态(TextField特性)
 * [contentAlignment]text和hint对其方式
 * [leading]展示在左边的组件
 * [trailing]展示在右边的组件
 * [background]背景
 * [horizontalPadding]横向的内间距
 * [enabled]是否可输入,false无法输入和复制
 * [readOnly]是否可输入,true无法输入,但可复制,获取焦点,移动光标
 * [textStyle]字体样式
 * [keyboardOptions]键盘配置
 * [keyboardActions]键盘回调
 * [visualTransformation]文本展示的转换
 * [onTextLayout]计算新文本布局时执行的回调
 * [interactionSource]状态属性
 * [cursorBrush]光标绘制
 */
@Composable
fun GoodTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    hint: HintComposeWithTextField? = null,
    @IntRange(from = 1L) maxLines: Int = 1,
    fontSize: TextUnit = 16.sp,
    fontColor: Color = Color333,
    maxLength: Int = Int.MAX_VALUE,
    contentAlignment: Alignment.Vertical = Alignment.CenterVertically,
    leading: (@Composable RowScope.() -> Unit)? = null,
    trailing: (@Composable RowScope.() -> Unit)? = null,
    background: BackgroundComposeWithTextField? = BackgroundComposeWithTextField.DEFAULT,
    horizontalPadding: Dp = 16.dp,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(MaterialTheme.colors.primary),
){}

The background attribute provides the ability to customize the background

The hint property is similar to the hint property of EditText, but it is more flexible and can use any Compose component

The maxLength attribute can control how many characters can be entered at most

import project

Add to the build.gradle file of the root project:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        ...
    }
}

Add it to the app's build.gradle, the latest version reference: https://jitpack.io/#lttttttttttttt/ComposeViews

dependencies{
    ...
    implementation 'com.github.ltttttttttttt:ComposeViews:1.1.4'
}

Then you can happily use GoodTextField and PasswordTextField

The project is open source, welcome to star: GitHub - ltttttttttttt/ComposeViews

And there are not only GoodTextField in the project, but also more useful Compose components, such as:

ViewPager in Compose: ComposePager

Banner

FlowLayout

More Compose components will be added later

end

More flexible and easy-to-use TextField and password input box in Compose

foreword

text

import project

Guess you like