前言

Jetpack Compose中的TextField簡單用起來很方便,但如果要自定義ui就不好實現了,我們看一下效果:

TextField:

?

?類似的還有OutlinedTextField:

?他們都有共同的api和特點,簡單使用很方便,但是其有很大的內邊距不好調整,且其背景ui也不太好調整(背景可以改成透明,但間距我查看源碼也沒改成...)

幸虧Compose中預留了基礎的輸入框實現:BasicTextField

沒有邊距,沒有背景,很適合我們自定義ui,所以我就根據BasicTextField封裝了一下,使ui更簡單易用

正文

先看一下怎么使用的和效果

?

然后還有根據GoodTextField封裝的適用于密碼輸入的PasswordTextField

?

?然后api基本和普通的TextFild沒什么區別,就簡單講一下額外提供的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),
){}

?其中background屬性提供了自定義背景的能力

hint屬性就類似于EditText的hint屬性,但是其更靈活,可以使用任何Compose組件

maxLength屬性可以控制最多能輸入多少個字

引入項目

?在根項目的build.gradle文件中加入:

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

app的build.gradle中加上,最新版本參考:https://jitpack.io/#ltttttttttttt/ComposeViews

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

?然后就可以愉快的使用GoodTextField和PasswordTextField了

項目已開源,歡迎star:GitHub - ltttttttttttt/ComposeViews

并且項目中不止有GoodTextField,還有更多好用的Compose組件,比如:

Compose中的ViewPager:ComposePager

Banner

FlowLayout

后續還會添加更多的Compose組件

end