短視訊系統利用Compose實現全新文字輸入框的相關程式碼
Jetpack Compose是用於構建原生Android UI的現代工具包，使用更簡潔的程式碼、強大的工具和直觀的Kotlin API，簡化並加速了Android上的UI開發。不同於Andorid常見的Xml+命令式Coding的UI開發正規化，Compose基於Kotlin的DSL實現了一套類似React的宣告式UI框架。伴隨React Native、Flutter等大前端框架的興起以及Jetpack Compose、SwiftUI等native框架的出現，宣告式UI正逐漸成為客戶端UI開發的新趨勢，那麼下面主要就來介紹一下Compose中全新的文字框。

@Composable
fun TextField(
value: TextFieldValue,//要展示的文字
onValueChange: (TextFieldValue) -> Unit,//監聽文字變化
modifier: Modifier = Modifier,//修飾符，常用於背景設定等
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,//指定輸入型別，類似inputType
 

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()//各種cursor、文字等顏色
)

那麼如何用compose實現上述滿足我們日常用法的輸入框呢,程式碼如下：

@Composable
fun ShowTextField(context: MainActivity) {
//初始化文字變數
var text by remember { mutableStateOf("") }

TextField(
value = text, // 顯示文字
onValueChange = { text = it }, // 監聽文字變化，並賦值給text
label = { Text(text = "Input") }, // 設定label
leadingIcon = @Composable {// 設定左邊圖示
Image(
imageVector = Icons.Filled.Search,
contentDescription = "search", //image的無障礙描述
modifier = Modifier.clickable {// 通過modifier來設定點選事件
Toast.makeText(
context,
"search $text",
Toast.LENGTH_SHORT
).show()
})
},
trailingIcon = @Composable {//設定右邊圖示
Image(imageVector = Icons.Filled.Clear,
contentDescription = "clear",
modifier = Modifier.clickable { text = "" }) // 新增點選清空事件
},
placeholder = @Composable { Text(text = "This is placeholder") },//hint提示語
}

以上就是 短視訊系統利用Compose實現全新文字輸入框的相關程式碼，更多內容歡迎關注之後的文章