【原創】Jetpack Compose學習筆記(三)

Jetpack Compose學習筆記(三)

最近看了不少的ComposeUI相關的博文，自己越來越喜歡這種界面編寫方式了，看着代碼感覺有些復雜其實是自己封裝的不好，多看看大神開源的會有很大幫助。

Jetpack Compose學習筆記(二)已經把Text函數基本的使用都介紹了，復雜的實現還在於AnnotatedString的使用，大多數場景都可以滿足了。本篇主要學習TextField函數的使用。

TextField

TextField位於androidx.compose.ui:ui-text包下，屬於Text體系里面的。該函數類似EditText，樣式就是MD風格，下面詳細介紹寫該函數的使用。

基本參數

value: String,
onValueChange: (String) -> Unit,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
label: @Composable (() -> Unit)? = null,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
isError: Boolean = false,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions(),
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape =
MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
colors: TextFieldColors = TextFieldDefaults.textFieldColors()

還是蠻多的，一點一點來學習吧。

• value和onValueChange

這兩個屬性比較簡單就是類似EditText中addTextChangedListener函數監聽值變化

• enabled

是否可以編輯，如果是false，則和Text函數沒啥區別了

• readOnly

編輯框內容不可以編輯，但是可以獲取焦點、移動光標

• textStyle

文本樣式，類型為TextStyle，我們可以看到該函數可以配置文本的顏色，大小，權重，字體等各種屬性，相關屬性可以參看Text函數

• label

這個label屬性如果不是默認的MD樣式的這種編輯框，基本不會使用到，可以看下效果

• placeholder

這個就是TextView中配置的hint屬性一樣， 這里需要注意的是如何和label一起使用，會被覆蓋效果，只有獲取焦點時候才會被顯示出來

• leadingIcon、trailingIcon

該屬性類似drawableStart和drawableEnd，配置前面的圖片，不過這個沒辦法控制圖片周圍的距離，要是想修改邊距，那就需要自己嵌套布局來實現

ps 這里多數依據吧，對於trailingIcon屬性可能很多用戶會問如何實現點擊操作，下面給個示例，這里涉及Modify所以先不過多說，后面單獨學習

 trailingIcon = {
      Icon(
             imageVector = Icons.Outlined.Close,
             contentDescription = null,
             modifier = Modifier.clickable {
                  input = ""
             }
      )
},

• isError

默認該屬性是false，設置后底部橫線，label等會顯示錯誤時候顏色。一般校驗輸入內容為錯誤時候動態設置為true使用。

• visualTransformation

可視化轉換，該屬性類型是一個接口VisualTransformation。

默認實現類是PasswordVisualTransformation，主要是將輸入的內容轉換為*****代替，與inputType屬性設置為password效果一樣.

當然我們也可以自己實現VisualTransformation該接口來實現一些其他轉換，比如限制長度、部分輸入文本的特殊處理、輸入文本類型校驗等等

• keyboardOptions & keyboardActions

keyboardOptions配置軟鍵盤類型，例如：鍵盤輸入類型為數字，鍵盤行為。該屬性類型為KeyboardOptions，我們可以看下該類的構造函數

class KeyboardOptions constructor(
    val capitalization: KeyboardCapitalization = KeyboardCapitalization.None,
    val autoCorrect: Boolean = true,
    val keyboardType: KeyboardType = KeyboardType.Text,  //可以配置輸入類型Text，Number等
    val imeAction: ImeAction = ImeAction.Default //配置軟鍵盤行為，例如：搜索，完成，發送等
) {

keyboardActions，鍵盤行為回調，例如用戶點擊搜索，完成等

• singleLine & maxLines

配置可編輯行數，當singleLine設置為true，則maxLines默認為1。不過多介紹了

• interactionSource

該屬性是交互的狀態信息，也就是相當於我們之前給按鈕設置的各種selector，來實現普通、點擊效果等。一般用在Button比較多。

下面示例展示使用一個獲取焦點的交互狀態來動態修改label屬性。

   val interactionSource = remember {
        MutableInteractionSource()
    }
    val focused by interactionSource.collectIsFocusedAsState()
    var mutableTip by remember {
        mutableStateOf("")
    }
    mutableTip = if (focused) "獲取焦點" else "失去焦點"

    var input by remember { mutableStateOf("") }
    TextField(
            value = input,
            label = {
                Text(mutableTip)
            },
            interactionSource = interactionSource,
            onValueChange = {
                input = it
            }
    )

• shape

定義控件形狀，默認四個角都是0.dp，我們可以根據自己需要調用fun RoundedCornerShape(size: Dp) 定義效果

• colors

配置TextField各種顏色信息

 fun textFieldColors(
        textColor: Color // 文本顏色
        disabledTextColor: Color // 禁用狀態時候文本顏色
        backgroundColor: Color // 背景色
        cursorColor: Color // 光標顏色
        errorCursorColor: Color // isError = true時候光標顏色
---------這面這組是TextField底部下划線的顏色，當都設置為透明時候我們就可以實現去掉下划線的效果了，對於自定義TextField樣式很有效果哦----
        focusedIndicatorColor: Color 
        unfocusedIndicatorColor: Color 
        disabledIndicatorColor: Color 
        errorIndicatorColor: Color 
---------End
---------下面這些根據字面意思就知道了，不備注了
        leadingIconColor: Color 
        disabledLeadingIconColor: Color 
        errorLeadingIconColor: Color 
        trailingIconColor: Color 
        disabledTrailingIconColor: Color 
        errorTrailingIconColor: Color
        focusedLabelColor: Color 
        unfocusedLabelColor: Color 
        disabledLabelColor: Color 
        errorLabelColor: Color 
        placeholderColor: Color 
        disabledPlaceholderColor: Color 
)

OutlinedTextField

OutlinedTextField 這個和TextInputLayout與EditText組合的效果是一樣的，相關屬性和TextField一樣，這里不再贅述