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

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

हम BasicTextField से ज़्यादा TextField का सुझाव देते हैं. ऐसा तब करें, जब आपके डिज़ाइन के लिए सामग्री TextField या OutlineTextField. हालांकि, 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 का इस्तेमाल करें: इससे बचें StateFlow जैसी रिऐक्टिव स्ट्रीम का इस्तेमाल करके, TextField के स्टेटस में बदलाव नहीं होता, क्योंकि इन स्ट्रक्चर में एसिंक्रोनस देरी हो सकती है.

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 के इस्तेमाल की स्थिति को बेहतर तरीके से मैनेज करने की सुविधा ब्लॉग पोस्ट.