如何從 Jetpack Compose 中的另一個可組合 function 獲取 TextField 值

Question

我創建了一個名為TextInput的 function 包含TextField

@Composable
fun TextInput(
    inputType: InputType
) {
    var value by remember { mutableStateOf("") }

    TextField(
        modifier = Modifier.clip(RoundedCornerShape(30.dp)),
        value = value,
        onValueChange = { value = it },
        leadingIcon = { Icon(imageVector = inputType.icon, null) },
        label = { Text(text = inputType.label) },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        singleLine = true,
        keyboardOptions = inputType.keyboardOptions,
        visualTransformation = inputType.visualTransformation,
    )

}

現在單擊按鈕SIGN UP\SIGN IN我想訪問該值並根據驗證顯示成功/錯誤。

        Button(
            onClick = {

                      //here

            },
            modifier = Modifier
                .padding(top = 30.dp)
                .width(200.dp),
            shape = RoundedCornerShape(20.dp)
        ) {
            Text(
                text = "SIGN IN",

                )
        }
==================================================
        Button(
            onClick = {

                    //here
            },
            modifier = Modifier
                .padding(top = 5.dp)
                .width(200.dp),
            shape = RoundedCornerShape(20.dp)
        ) {

            Text(text = "SIGN UP")
        }

如果您想查看整個代碼以了解我的意思。

@Composable
fun Sign_in_up_Screen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {


        Image(
            painter = painterResource(R.drawable.login),
            contentDescription = "",
            modifier = Modifier
                .background(Color.Companion.Red)
                .fillMaxWidth()
        )

        TopTextButton()
    }
}

@Composable
fun Login_Screen() {
    val context = LocalContext.current
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(20.dp),
        modifier = Modifier.fillMaxSize()
    ) {

        TextInput(InputType.Email)
        TextInput(InputType.Password)

        Button(
            onClick = {

                      //here

            },
            modifier = Modifier
                .padding(top = 30.dp)
                .width(200.dp),
            shape = RoundedCornerShape(20.dp)
        ) {
            Text(
                text = "SIGN IN",

                )
        }

    }
}

@Composable
fun Signup_Screen() {
    val context = LocalContext.current
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(20.dp),
        modifier = Modifier.fillMaxSize()
    ) {

        TextInput(InputType.FullName)
        TextInput(InputType.Email)
        TextInput(InputType.Password)
        TextInput(InputType.ConfirmPassword)

        Button(
            onClick = {

                    //here
            },
            modifier = Modifier
                .padding(top = 5.dp)
                .width(200.dp),
            shape = RoundedCornerShape(20.dp)
        ) {

            Text(text = "SIGN UP")
        }

    }
}

sealed class InputType(
    val label: String,
    val icon: ImageVector,
    val keyboardOptions: KeyboardOptions,
    val visualTransformation: VisualTransformation
) {

    object FullName : InputType(
        label = "Full Name",
        icon = Icons.Default.Person,
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
        visualTransformation = VisualTransformation.None
    )

    object Email : InputType(
        label = "E-mail",
        icon = Icons.Default.Email,
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
        visualTransformation = VisualTransformation.None
    )

    object Password : InputType(
        label = "Password",
        icon = Icons.Default.Lock,
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = KeyboardType.Password
        ),
        visualTransformation = PasswordVisualTransformation()
    )

    object ConfirmPassword : InputType(
        label = "Confirm Password",
        icon = Icons.Default.Lock,
        keyboardOptions = KeyboardOptions(
            imeAction = ImeAction.Done,
            keyboardType = KeyboardType.Password
        ),
        visualTransformation = PasswordVisualTransformation()
    )

}

@Composable
fun TextInput(
    inputType: InputType
) {
    var value by remember { mutableStateOf("") }

    TextField(
        modifier = Modifier.clip(RoundedCornerShape(30.dp)),
        value = value,
        onValueChange = { value = it },
        leadingIcon = { Icon(imageVector = inputType.icon, null) },
        label = { Text(text = inputType.label) },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        singleLine = true,
        keyboardOptions = inputType.keyboardOptions,
        visualTransformation = inputType.visualTransformation,
    )

}

@Composable
fun TopTextButton() {

    var screen by remember { mutableStateOf(false) }

    Row(
        modifier = Modifier.padding(bottom = 40.dp),
    ) {

        TextButton( onClick = {
            if (screen)
                screen = !screen
        }) {
            Text(text = "Sign in")
        }

        Spacer(Modifier.width(145.dp))

        TextButton(onClick = {
            if (!screen)
                screen = !screen
        }) {
            Text(text = "Sign up")
        }
    }

    if (!screen){
        Login_Screen()
    }
    if (screen) {
        Signup_Screen()
    }
}

此代碼是否正確或者我應該為每個 {Textfield} 放置一個 function？ 所以每個文本字段都有自己的 state

我是初學者android工作室編程

Answer 1

您可以像這樣將 onValueChange 參數添加到 TextInput 中；

@Composable
fun TextInput(
    inputType: InputType,
    onValueChange: (String) -> Unit
) {
   TextField(
      //
      onValueChange = {
         onValueChange(it)
         value = it
      }
      //
}

打印您的價值；

TextInput(InputType.Email){ textFieldValue ->
   println(textFieldValue)
}

Answer 2

如果我沒記錯的話，你是在問這個邏輯是否設置正確。 我不認為使用有什么問題。 足夠成功。 :)