Compose 全新文本输入框体验，你值得拥有！

2024-01-12 17:18:34

在日常开发中，文本输入框的使用频率很高。它通常采用左边一个搜索图标、右边一个清除文本图标的形式。如果文本框为空，则显示提示关键词。

文本输入框的实现方式有很多，其中 Compose 是一个非常流行的 UI 框架。它提供了丰富的组件库，可以帮助我们快速构建出美观且实用的界面。

使用 Compose 构建文本输入框

使用 Compose 构建文本输入框非常简单，只需几行代码即可完成。以下是一个基本的示例：

import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType

@Composable
fun TextFieldExample() {
    val text = remember { mutableStateOf("") }

    TextField(
        value = text.value,
        onValueChange = { text.value = it },
        placeholder = { Text("Search") },
        trailingIcon = {
            IconButton(onClick = { text.value = "" }) {
                Icon(painterResource(id = R.drawable.ic_clear), contentDescription = null)
            }
        },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.Search
        ),
        keyboardActions = KeyboardActions(
            onSearch = {
                // Perform search here
            }
        )
    )
}

自定义文本输入框

除了使用默认样式外，我们还可以自定义文本输入框的外观和行为。Compose 提供了丰富的 API，可以让我们轻松地实现各种自定义效果。

外观自定义

我们可以通过修改 TextField 的 modifier 属性来修改其外观，例如设置边框、背景色和圆角等。以下示例展示了如何设置文本输入框的边框和圆角：

TextField(
    value = text.value,
    onValueChange = { text.value = it },
    modifier = Modifier
        .border(1.dp, Color.Gray)
        .cornerRadius(5.dp)
)

行为自定义

除了外观自定义外，我们还可以自定义文本输入框的行为，例如设置输入类型、键盘动作和输入限制等。以下示例展示了如何设置文本输入框的输入类型和键盘动作：

TextField(
    value = text.value,
    onValueChange = { text.value = it },
    keyboardType = KeyboardType.Number,
    keyboardActions = KeyboardActions(
        onSearch = {
            // Perform search here
        }
    )
)