序文

Jetpack Compose の TextField は使いやすいですが、UI をカスタマイズしたい場合に実装するのは簡単ではありません.効果を見てみましょう:

テキストフィールド：

OutlinedTextField に似ています:

それらはすべて同じ API と機能を持ち、使いやすく非常に便利ですが、調整が容易ではない大きな内側のマージンがあり、その背景の UI は調整が容易ではありません (背景は透明に変更できますが、ソースコードを確認した間隔はありませんでした.to...)

Compose で予約されている基本的な入力ボックスの実装に感謝します: BasicTextField

余白も背景もなく、UI をカスタマイズするのに非常に適しているため、UI を使いやすくするために BasicTextField に基づいてカプセル化しました。

文章

まずは使い方と効果をチェック

次に、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 属性は、背景をカスタマイズする機能を提供します

ヒントプロパティは、EditText のヒントプロパティに似ていますが、より柔軟で、任意の Compose コンポーネントを使用できます。

maxLength 属性は、最大で入力できる文字数を制御できます

プロジェクトのインポート

ルートプロジェクトの build.gradle ファイルに追加します。

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

これをアプリの build.gradle に追加します。これは最新バージョンのリファレンスです: https://jitpack.io/#lttttttttttttt/ComposeViews

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

次に、GoodTextField と PasswordTextField を喜んで使用できます。

このプロジェクトはオープンソースです。スターへようこそ: GitHub - ltttttttttttt/ComposeViews

また、プロジェクトには GoodTextField だけでなく、次のようなより便利な Compose コンポーネントもあります。

Compose の ViewPager: ComposePager

バナー

フローレイアウト

より多くの Compose コンポーネントが後で追加されます

終わり

Compose のより柔軟で使いやすい TextField とパスワード入力ボックス

序文

文章

プロジェクトのインポート

おすすめ