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

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

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

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

टेक्स्ट को स्टाइल करने के लिए, Brush API का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Brush API की मदद से बेहतर स्टाइलिंग की सुविधा चालू करना लेख पढ़ें.

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

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

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

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

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

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

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