उपयोगकर्ता के इनपुट मैनेज करना

TextField का इस्तेमाल करके, उपयोगकर्ता टेक्स्ट डाल सकते हैं और उसमें बदलाव कर सकते हैं. इस पेज पर बताया गया है कि TextField को लागू करने और स्टाइल TextField इनपुट को कैसे लागू किया जा सकता है. साथ ही, TextField इनपुट के अन्य विकल्पों को कॉन्फ़िगर करने का तरीका भी बताया गया है. जैसे, कीबोर्ड के विकल्प और उपयोगकर्ता के इनपुट को विज़ुअल में बदलने की सुविधा.

TextField लागू करने का तरीका चुनना

TextField को लागू करने के दो लेवल होते हैं:

1. TextField, मटीरियल डिज़ाइन को लागू करने का तरीका है. हमारा सुझाव है कि आप इसे लागू करने का यह तरीका चुनें, क्योंकि यह मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक है:
   • डिफ़ॉल्ट स्टाइल भरी हुई है
   • OutlinedTextField, आउटलाइन स्टाइल वर्शन है
2. BasicTextField की मदद से, उपयोगकर्ता हार्डवेयर या सॉफ़्टवेयर कीबोर्ड का इस्तेमाल करके टेक्स्ट में बदलाव कर सकते हैं. हालांकि, इसमें हिंट या प्लेसहोल्डर जैसी कोई सजावट नहीं होती.

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

शैली TextField

TextField और BasicTextField में कई सामान्य पैरामीटर होते हैं, ताकि उन्हें अपनी पसंद के मुताबिक बनाया जा सके. TextField की पूरी सूची TextField सोर्स कोड में उपलब्ध है. यहां कुछ काम के पैरामीटर की सूची दी गई है. हालांकि, इसमें और भी पैरामीटर शामिल हो सकते हैं:

• singleLine
• maxLines
• textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}
TextSnippets.kt

अगर आपके डिज़ाइन में मैटेरियल TextField या OutlinedTextField की ज़रूरत है, तो हमारा सुझाव है कि आप BasicTextField के बजाय TextField का इस्तेमाल करें. हालांकि, BasicTextField का इस्तेमाल ऐसे डिज़ाइन बनाते समय करना चाहिए जिन्हें मटीरियल स्पेसिफ़िकेशन में सजावट की ज़रूरत न हो.

Brush API की मदद से इनपुट को स्टाइल करना

TextField में बेहतर स्टाइल देने के लिए, Brush API का इस्तेमाल किया जा सकता है. अगले सेक्शन में बताया गया है कि TextField इनपुट में कलर ग्रेडिएंट जोड़ने के लिए, ब्रश का इस्तेमाल कैसे किया जा सकता है.

टेक्स्ट को स्टाइल करने के लिए ब्रश एपीआई का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, ब्रश एपीआई की मदद से बेहतर स्टाइल चालू करना देखें.

TextStyle का इस्तेमाल करके रंगीन ग्रेडिएंट लागू करना

TextField में टाइप करते समय रंगीन ग्रेडिएंट लागू करने के लिए, अपने TextField के लिए अपने पसंदीदा ब्रश को TextStyle के तौर पर सेट करें. इस उदाहरण में, TextField में टेक्स्ट टाइप किए जाने पर इंद्रधनुष के रंगों का ग्रेडिएंट इफ़ेक्ट देखने के लिए, हम linearGradient वाले बिल्ट-इन ब्रश का इस्तेमाल करते हैं.

var text by remember { mutableStateOf("") }
val brush = remember {
    Brush.linearGradient(
        colors = rainbowColors
    )
}
TextField(
    value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush)
)
TextSnippets.kt

कीबोर्ड के विकल्प सेट करना

TextField की मदद से, कीबोर्ड के कॉन्फ़िगरेशन के विकल्प सेट किए जा सकते हैं. जैसे, कीबोर्ड का लेआउट. इसके अलावा, अगर कीबोर्ड पर ऑटो करेक्ट की सुविधा काम करती है, तो उसे चालू किया जा सकता है. अगर सॉफ़्टवेयर कीबोर्ड यहां दिए गए विकल्पों के मुताबिक नहीं है, तो हो सकता है कि कुछ विकल्पों की गारंटी न दी जाए. इस्तेमाल किए जा सकने वाले कीबोर्ड के विकल्पों की सूची यहां दी गई है:

• capitalization
• autoCorrect
• keyboardType
• imeAction

इनपुट फ़ॉर्मैट करना

TextField की मदद से, इनपुट वैल्यू पर VisualTransformation सेट किया जा सकता है. जैसे, पासवर्ड के लिए वर्णों को * से बदलना या क्रेडिट कार्ड नंबर के लिए हर चार अंकों के बाद हाइफ़न डालना:

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}
TextSnippets.kt

VisualTransformationSamples सोर्स कोड में और उदाहरण उपलब्ध हैं.

इनपुट को साफ़ करना

टेक्स्ट में बदलाव करते समय, शुरुआती वर्णों को हटाना एक आम काम है. इसके अलावा, इनपुट स्ट्रिंग में बदलाव होने पर, उसे बदला भी जा सकता है.

मॉडल के तौर पर, आपको यह मान लेना चाहिए कि कीबोर्ड हर onValueChange में मनमुताबिक और बड़े बदलाव कर सकता है. उदाहरण के लिए, ऐसा तब हो सकता है, जब उपयोगकर्ता ऑटो करेक्ट की सुविधा का इस्तेमाल करता है, किसी शब्द को इमोजी से बदलता है या बदलाव करने की अन्य स्मार्ट सुविधाओं का इस्तेमाल करता है. इसे सही तरीके से मैनेज करने के लिए, ट्रांसफ़ॉर्मेशन लॉजिक लिखते समय यह मान लें कि onValueChange में पास किया गया मौजूदा टेक्स्ट, onValueChange में पास की जाने वाली पिछली या अगली वैल्यू से अलग है.

शुरुआत में शून्य न दिखाने वाला टेक्स्ट फ़ील्ड लागू करने के लिए, हर वैल्यू में बदलाव होने पर, शुरुआत में मौजूद सभी शून्य हटाएं.

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}
TextSnippets.kt

टेक्स्ट को साफ़ करते समय कर्सर की पोज़िशन को कंट्रोल करने के लिए, स्टेटस के हिस्से के तौर पर TextFieldValue TextField के ओवरलोड का इस्तेमाल करें.

स्टेटस के साथ इस्तेमाल करने के सबसे सही तरीके

यहां TextField के स्टेटस को तय करने और अपडेट करने के सबसे सही तरीके दिए गए हैं. इससे, आपके ऐप्लिकेशन में इनपुट से जुड़ी समस्याओं से बचा जा सकता है.

• TextField स्टेटस दिखाने के लिए, MutableState का इस्तेमाल करें: TextField स्टेटस दिखाने के लिए, StateFlow जैसी रिऐक्टिव स्ट्रीम का इस्तेमाल करने से बचें. ऐसा इसलिए, क्योंकि इन स्ट्रक्चर की वजह से, असाइनमेंट में देरी हो सकती है.

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

• स्टेटस अपडेट करने में देरी से बचें: onValueChange को कॉल करने पर, अपने TextField को सिंक करके तुरंत अपडेट करें:

// SignUpViewModel.kt

class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() {

    var username by mutableStateOf("")
        private set

    fun updateUsername(input: String) {
        username = input
    }
}

// SignUpScreen.kt

@Composable
fun SignUpScreen(/*...*/) {

    OutlinedTextField(
        value = viewModel.username,
        onValueChange = { username -> viewModel.updateUsername(username) }
        /*...*/
    )
}
TextSnippets.kt

• स्थिति को कहां तय करना है: अगर TextField स्थिति के लिए, टाइप करते समय कारोबारी लॉजिक की पुष्टि की ज़रूरत है, तो स्थिति को ViewModel पर होस्ट करना सही है. अगर ऐसा नहीं है, तो कॉन्टेंट के सोर्स के तौर पर, कंपोज़ेबल या स्टेट होल्डर क्लास का इस्तेमाल किया जा सकता है. अपने राज्य को बढ़ाने की जगह के बारे में ज़्यादा जानने के लिए, राज्य को लिफ़्ट करने से जुड़ा दस्तावेज़ देखें.