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

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 का इस्तेमाल किया जाना चाहिए ऐसी डिज़ाइन बनाते समय इस्तेमाल करें जिसे मटीरियल स्पेसिफ़िकेशन में सजावट की ज़रूरत न हो.

ब्रश एपीआई की मदद से स्टाइल इनपुट

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

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

चेतावनी: TextStyle में ब्रश एपीआई का मौजूदा इस्तेमाल प्रयोग के तौर पर किया जा रहा है. आने वाले समय में, एक्सपेरिमेंट के तौर पर इस्तेमाल किए जाने वाले एपीआई में बदलाव किए जा सकते हैं.

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

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

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

ध्यान दें: ब्रश को साफ़ रखने के लिए, remember फ़ंक्शन का इस्तेमाल करना न भूलें शॉर्ट वीडियो में तब बदलाव किया जाता है, जब टाइप किए गए हर नए वर्ण के लिए TextField की स्थिति बदल जाती है.

तीसरी इमेज. सिर्फ़ एक टेक्स्ट को पसंद के मुताबिक बनाने के लिए, linearGradient के साथ buildAnnotatedString और SpanStyle का इस्तेमाल करना.

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

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

• capitalization
• autoCorrect
• keyboardType
• imeAction

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

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

@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 पर होस्ट करना सही है. अगर ऐसा नहीं है, तो सटीक जानकारी के सोर्स के तौर पर, कॉम्पोज़ेबल या स्टेटस होल्डर क्लास का इस्तेमाल किया जा सकता है. अपने राज्य को कहां से फ़तह करना है, इस बारे में ज़्यादा जानने के लिए स्टेट लिफ़्ट से जुड़े दस्तावेज़.

ध्यान दें: इन सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, Compose में TextField के लिए स्टेटस को बेहतर तरीके से मैनेज करना ब्लॉग पोस्ट पढ़ें.