在 Jet-pack Compose 中创建通用编辑文本字段

Question

我是喷气背包组合的新手。谁能告诉我创建通用可组合函数是正确的吗？ 常用功能

@Composable
fun commonTextFiled(
    hint: String,
    icon: ImageVector,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Done,
    trailingIcon: Boolean = false
): String {
    var textOfEditText by rememberSaveable { mutableStateOf("") }
    var toggleClick by rememberSaveable { mutableStateOf(false) }
    TextField(
        value = textOfEditText,
        onValueChange = { textOfEditText = it },
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp),
        keyboardOptions = KeyboardOptions(
            KeyboardCapitalization.Characters,
            autoCorrect = false,
            keyboardType = keyboardType, imeAction
        ),
        placeholder = { Text(text = hint) },
        visualTransformation = if (toggleClick) VisualTransformation.None else PasswordVisualTransformation()
        ,leadingIcon = { Icon(icon, contentDescription = null) },
        trailingIcon = {
            if (trailingIcon) {
                val image: Int = if (toggleClick) {
                    R.drawable.visibil
                } else {
                    R.drawable.visibility_off
                }

                IconButton(onClick = { toggleClick =!toggleClick }) {
                 Icon(painter = painterResource(id = image), contentDescription = null)
                }
            }
        },
        singleLine = true
    )
    return textOfEditText
}

调用常用函数--------------------

 var email by rememberSaveable { mutableStateOf("") }
 var password by rememberSaveable { mutableStateOf("") }

Spacer(modifier = modifier.padding(vertical = 10.dp))

                email = commonTextFiled(hint = "Enter Your Email", icon = Icons.Filled.Email)

                Spacer(modifier = modifier.padding(vertical = 10.dp))

                password = commonTextFiled("password", Icons.Filled.Lock, trailingIcon = true)

我很困惑这样创建和调用 compose 函数的方法是正确还是错误。提前致谢。

Answer 1

是的，绝对是。您可以创建可重用的可组合函数。

该函数不返回任何内容。发出 UI 的 Compose 函数不需要返回任何内容，因为它们描述所需的屏幕状态而不是构造 UI 小部件。欲了解更多信息，请参阅this。

您可以将回调传递给可组合项，而不是返回字符串。

@Composable
fun CommonTextFiled(
    hint: String, text: String = "", onValueChange: (String) -> Unit
) {
    TextField(
        value = text,
        onValueChange = onValueChange,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp),
        placeholder = { Text(text = hint) },
        singleLine = true
    )
}

@Composable
fun App() {
    var string by remember { mutableStateOf("") }
    CommonTextFiled(hint = "Enter Text", text = string) {
        string = it
    }
}