टेक्स्ट फ़ील्ड कॉन्फ़िगर करना

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

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

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

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

TextField को दो लेवल पर लागू किया जा सकता है:

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

TextField(
    state = rememberTextFieldState(initialText = "Hello"),
    label = { Text("Label") }
)
StateBasedText.kt

OutlinedTextField(
    state = rememberTextFieldState(),
    label = { Text("Label") }
)
StateBasedText.kt

शैली TextField

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

• textStyle
• lineLimits

TextField(
    state = rememberTextFieldState("Hello\nWorld\nInvisible"),
    lineLimits = TextFieldLineLimits.MultiLine(maxHeightInLines = 2),
    placeholder = { Text("") },
    textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
    label = { Text("Enter text") },
    modifier = Modifier.padding(20.dp)
)
StateBasedText.kt

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

लाइन की सीमाएं कॉन्फ़िगर करना

TextField कंपोज़ेबल, एक ऐक्सिस पर स्क्रोल करने की सुविधा देते हैं. स्क्रोल करने का तरीका, lineLimits पैरामीटर से तय होता है. एक लाइन वाले TextFields को हॉरिज़ॉन्टल तरीके से स्क्रोल करने के लिए कॉन्फ़िगर किया जाता है, जबकि एक से ज़्यादा लाइन वाले TextFields को वर्टिकल तरीके से स्क्रोल करने के लिए कॉन्फ़िगर किया जाता है.

अपने TextField के लिए सही लाइन कॉन्फ़िगरेशन चुनने के लिए, TextFieldLineLimits का इस्तेमाल करें:

TextField(
    state = rememberTextFieldState(),
    lineLimits = TextFieldLineLimits.SingleLine
)
StateBasedText.kt

SingleLine कॉन्फ़िगरेशन की ये विशेषताएं हैं:

• टेक्स्ट कभी रैप नहीं होता और नई लाइनों की अनुमति नहीं देता.
• TextField की ऊंचाई हमेशा तय होती है.
• अगर टेक्स्ट तय सीमा से ज़्यादा है, तो यह हॉरिज़ॉन्टल तौर पर स्क्रोल होता है.

TextField(
    state = rememberTextFieldState("Hello\nWorld\nHello\nWorld"),
    lineLimits = TextFieldLineLimits.MultiLine(1, 4)
)
StateBasedText.kt

MultiLine कॉन्फ़िगरेशन की ये विशेषताएं हैं:

• इसमें दो पैरामीटर इस्तेमाल किए जाते हैं: minHeightInLines और maxHeightInLines.
• टेक्स्ट फ़ील्ड की ऊंचाई कम से कम minHeightInLines होनी चाहिए.
• अगर टेक्स्ट तय सीमा से ज़्यादा है, तो वह रैप हो जाएगा.
• अगर टेक्स्ट के लिए ज़्यादा लाइनों की ज़रूरत होती है, तो फ़ील्ड तब तक बढ़ता है, जब तक कि वह maxHeightInLines लंबा न हो जाए. इसके बाद, यह वर्टिकल तौर पर स्क्रोल होता है.

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

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

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

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

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

val brush = remember {
    Brush.linearGradient(
        colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta)
    )
}
TextField(
    state = rememberTextFieldState(), textStyle = TextStyle(brush = brush)
)
StateBasedText.kt

टेक्स्ट फ़ील्ड की स्थिति मैनेज करना

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

• initialText: TextField का कॉन्टेंट.
• initialSelection: इससे पता चलता है कि कर्सर या चुना गया हिस्सा कहां है.

TextFieldState, onValueChange जैसे अन्य तरीकों से इसलिए अलग है, क्योंकि TextFieldState पूरे इनपुट फ़्लो को पूरी तरह से शामिल करता है. इसमें सही बैकिंग डेटा स्ट्रक्चर का इस्तेमाल करना, फ़िल्टर और फ़ॉर्मैटिंग करने वाले टूल को इनलाइन करना, और अलग-अलग सोर्स से किए गए सभी बदलावों को सिंक करना शामिल है.

TextField में स्टेट को ऊपर ले जाने के लिए, TextFieldState() का इस्तेमाल किया जा सकता है. इसके लिए, हमारा सुझाव है कि rememberTextFieldState() फ़ंक्शन का इस्तेमाल करें. rememberTextFieldState() आपके कंपोज़ेबल में TextFieldState इंस्टेंस बनाता है. साथ ही, यह पक्का करता है कि स्टेट ऑब्जेक्ट को याद रखा जाए. इसके अलावा, यह सेव करने और वापस लाने की सुविधा भी देता है:

val usernameState = rememberTextFieldState()
TextField(
    state = usernameState,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("Enter Username") }
)
StateBasedText.kt

rememberTextFieldState में कोई खाली पैरामीटर हो सकता है या इसमें कोई शुरुआती वैल्यू हो सकती है. यह वैल्यू, टेक्स्ट की वैल्यू को दिखाने के लिए पास की जाती है. अगर बाद में रीकंपोज़िशन में कोई दूसरी वैल्यू पास की जाती है, तो स्थिति की वैल्यू अपडेट नहीं होती है. शुरू होने के बाद स्थिति को अपडेट करने के लिए, TextFieldState पर बदलाव करने के तरीकों को कॉल करें.

TextField(
    state = rememberTextFieldState(initialText = "Username"),
    lineLimits = TextFieldLineLimits.SingleLine,
)
StateBasedText.kt

TextFieldBuffer की मदद से टेक्स्ट में बदलाव करना

TextFieldBuffer, टेक्स्ट कंटेनर के तौर पर काम करता है. इसमें बदलाव किया जा सकता है. यह StringBuilder की तरह ही काम करता है. इसमें टेक्स्ट कॉन्टेंट और चुने गए हिस्से के बारे में जानकारी होती है.

आपको अक्सर TextFieldBuffer को TextFieldState.edit, InputTransformation.transformInput या OutputTransformation.transformOutput जैसे फ़ंक्शन पर रिसीवर स्कोप के तौर पर इस्तेमाल करते हुए देखा होगा. इन फ़ंक्शन में, ज़रूरत के हिसाब से TextFieldBuffer को पढ़ा या अपडेट किया जा सकता है. इसके बाद, इन बदलावों को TextFieldState में सेव कर दिया जाता है या OutputTransformation के मामले में रेंडरिंग पाइपलाइन को भेज दिया जाता है.

बफ़र के कॉन्टेंट में बदलाव करने के लिए, स्टैंडर्ड एडिटिंग फ़ंक्शन का इस्तेमाल किया जा सकता है. जैसे, append, insert, replace या delete. चुने जाने की स्थिति बदलने के लिए, सीधे तौर पर इसके selection: TextRange वैरिएबल को सेट करें. इसके अलावा, placeCursorAtEnd या selectAll जैसे यूटिलिटी फ़ंक्शन का इस्तेमाल करें. चुने गए हिस्से को TextRange के तौर पर दिखाया जाता है. इसमें, शुरुआती इंडेक्स शामिल होता है और आखिरी इंडेक्स शामिल नहीं होता. (3, 3) जैसी एक जैसी शुरुआती और आखिरी वैल्यू वाला TextRange, कर्सर की ऐसी पोज़िशन को दिखाता है जिसमें कोई वर्ण नहीं चुना गया है.

val phoneNumberState = rememberTextFieldState("1234567890")

TextField(
    state = phoneNumberState,
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Phone
    ),
    inputTransformation = InputTransformation.maxLength(10).then {
        if (!asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    },
    outputTransformation = OutputTransformation {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
)
StateBasedText.kt

TextFieldState में मौजूद टेक्स्ट में बदलाव करना

स्टेट को सीधे तौर पर अपने स्टेट वैरिएबल के ज़रिए बदलने के कई तरीके हैं:

• edit: इससे आपको स्टेट के कॉन्टेंट में बदलाव करने की सुविधा मिलती है. साथ ही, TextFieldBuffer फ़ंक्शन मिलते हैं, ताकि insert, replace, append जैसे तरीकों का इस्तेमाल किया जा सके.

  // Initial textFieldState text passed in is "I love Android"
  // textFieldState.text : I love Android
  // textFieldState.selection: TextRange(14, 14)
  textFieldState.edit { insert(14, "!") }
  // textFieldState.text : I love Android!
  // textFieldState.selection: TextRange(15, 15)
  textFieldState.edit { replace(7, 14, "Compose") }
  // textFieldState.text : I love Compose!
  // textFieldState.selection: TextRange(15, 15)
  textFieldState.edit { append("!!!") }
  // textFieldState.text : I love Compose!!!!
  // textFieldState.selection: TextRange(18, 18)
  textFieldState.edit { selectAll() }
  // textFieldState.text : I love Compose!!!!
  // textFieldState.selection: TextRange(0, 18)
  StateBasedText.kt

• setTextAndPlaceCursorAtEnd: इससे मौजूदा टेक्स्ट मिट जाता है और उसकी जगह दिया गया टेक्स्ट आ जाता है. साथ ही, कर्सर को आखिर में सेट कर दिया जाता है.

  textFieldState.setTextAndPlaceCursorAtEnd("I really love Android")
  // textFieldState.text : I really love Android
  // textFieldState.selection : TextRange(21, 21)
  StateBasedText.kt

• clearText: इससे पूरा टेक्स्ट मिट जाता है.

  textFieldState.clearText()
  // textFieldState.text :
  // textFieldState.selection : TextRange(0, 0)
  StateBasedText.kt

अन्य TextFieldState फ़ंक्शन के लिए, TextFieldState रेफ़रंस देखें.

उपयोगकर्ता के इनपुट में बदलाव करना

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

इनपुट ट्रांसफ़ॉर्मेशन की मदद से, उपयोगकर्ता के इनपुट को फ़िल्टर करना

इनपुट ट्रांसफ़ॉर्मेशन की मदद से, उपयोगकर्ता से मिले इनपुट को फ़िल्टर किया जा सकता है. उदाहरण के लिए, अगर आपके TextField में अमेरिका का फ़ोन नंबर डाला जाता है, तो आपको सिर्फ़ 10 अंकों का नंबर स्वीकार करना है. InputTransformation के नतीजे, TextFieldState में सेव किए जाते हैं.

सामान्य InputTransformation इस्तेमाल के उदाहरणों के लिए, पहले से मौजूद फ़िल्टर होते हैं. लंबाई सीमित करने के लिए, InputTransformation.maxLength() पर कॉल करें:

TextField(
    state = rememberTextFieldState(),
    lineLimits = TextFieldLineLimits.SingleLine,
    inputTransformation = InputTransformation.maxLength(10)
)
StateBasedText.kt

कस्टम इनपुट ट्रांसफ़ॉर्मेशन

InputTransformation एक सिंगल फ़ंक्शन इंटरफ़ेस है. अपने कस्टम InputTransformation को लागू करते समय, आपको InputTransformation को बदलना होगा:TextFieldBuffer.transformInput

class CustomInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
    }
}
StateBasedText.kt

किसी फ़ोन नंबर के लिए, इनपुट में बदलाव करने की सुविधा जोड़ने के लिए, कस्टम इनपुट ट्रांसफ़ॉर्मेशन जोड़ें. इससे सिर्फ़ अंकों को TextField में टाइप किया जा सकेगा:

class DigitOnlyInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
        if (!asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    }
}
StateBasedText.kt

चेन इनपुट ट्रांसफ़ॉर्मेशन

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

TextField(
    state = rememberTextFieldState(),
    inputTransformation = InputTransformation.maxLength(6)
        .then(CustomInputTransformation()),
)
StateBasedText.kt

इनपुट ट्रांसफ़ॉर्मेशन जोड़ने के बाद, TextField इनपुट में ज़्यादा से ज़्यादा 10 अंक डाले जा सकते हैं.

डेटा को दिखाने से पहले उसे फ़ॉर्मैट करना

OutputTransformations की मदद से, स्क्रीन पर रेंडर होने से पहले उपयोगकर्ता के इनपुट को फ़ॉर्मैट किया जा सकता है. InputTransformation के उलट, OutputTransformation के ज़रिए की गई फ़ॉर्मैटिंग, TextFieldState में सेव नहीं होती है. फ़ोन नंबर के पिछले उदाहरण के आधार पर, आपको सही जगहों पर ब्रैकेट और डैश जोड़ने होंगे:

यह वैल्यू के आधार पर तय होने वाले TextField में VisualTransformation को हैंडल करने का नया तरीका है. इसमें मुख्य अंतर यह है कि आपको उनके ऑफ़सेट मैपिंग का हिसाब नहीं लगाना पड़ता.

OutputTransformation एक सिंगल ऐब्स्ट्रैक्ट मेथड इंटरफ़ेस है. कस्टम OutputTransformation लागू करने के लिए, आपको transformOutput तरीके को बदलना होगा:

class CustomOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
    }
}
StateBasedText.kt

किसी फ़ोन नंबर को फ़ॉर्मैट करने के लिए, अपने OutputTransformation में इंडेक्स 0 पर शुरुआती ब्रैकेट, इंडेक्स 4 पर आखिरी ब्रैकेट, और इंडेक्स 8 पर डैश जोड़ें:

class PhoneNumberOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
}
StateBasedText.kt

इसके बाद, TextField में OutputTransformation जोड़ें:

TextField(
    state = rememberTextFieldState(),
    outputTransformation = PhoneNumberOutputTransformation()
)
StateBasedText.kt

ट्रांसफ़ॉर्मेशन एक साथ कैसे काम करते हैं

इस डायग्राम में, टेक्स्ट इनपुट से लेकर आउटपुट तक के फ़्लो को दिखाया गया है:

1. इनपुट, इनपुट सोर्स से मिलता है.
2. इनपुट को InputTransformation के ज़रिए फ़िल्टर किया जाता है. इसे TextFieldState में सेव किया जाता है.
3. इनपुट को फ़ॉर्मैट करने के लिए, OutputTransformation का इस्तेमाल किया जाता है.
4. इनपुट को TextField में दिखाया गया है.

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

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

• capitalization
• autoCorrect
• keyboardType
• imeAction

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

KeyboardOptions.showKeyboardOnFocus को सही पर सेट करने पर, TextField को परोक्ष रूप से फ़ोकस मिलने पर सॉफ़्टवेयर कीबोर्ड अपने-आप नहीं दिखता. ऐसे मामलों में, उपयोगकर्ता को कीबोर्ड दिखाने के लिए, TextField पर टैप करना होगा.

कीबोर्ड इंटरैक्शन लॉजिक तय करना

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

यह तय करने के लिए कि जब कोई उपयोगकर्ता इस ऐक्शन बटन पर टैप करे, तो क्या हो, onKeyboardAction पैरामीटर का इस्तेमाल करें. यह पैरामीटर, KeyboardActionHandler नाम के एक वैकल्पिक फ़ंक्शनल इंटरफ़ेस को स्वीकार करता है. KeyboardActionHandler इंटरफ़ेस में एक ही तरीका होता है, onKeyboardAction(performDefaultAction: () -> Unit). इस onKeyboardAction तरीके को लागू करके, कस्टम लॉजिक जोड़ा जा सकता है. यह लॉजिक तब काम करता है, जब कोई उपयोगकर्ता कीबोर्ड के ऐक्शन बटन को दबाता है.

कीबोर्ड से की जाने वाली कई स्टैंडर्ड कार्रवाइयों के लिए, डिफ़ॉल्ट व्यवहार पहले से मौजूद होते हैं. उदाहरण के लिए, कार्रवाई के टाइप के तौर पर ImeAction.Next या ImeAction.Previous चुनने पर, फ़ोकस डिफ़ॉल्ट रूप से अगले या पिछले इनपुट फ़ील्ड पर चला जाएगा. इसी तरह, ImeAction.Done पर सेट किया गया ऐक्शन बटन, आम तौर पर सॉफ़्टवेयर कीबोर्ड को बंद कर देता है. ये डिफ़ॉल्ट फ़ंक्शन अपने-आप लागू होते हैं. इनके लिए, आपको KeyboardActionHandler देने की ज़रूरत नहीं होती.

इन डिफ़ॉल्ट कार्रवाइयों के अलावा, अपनी पसंद के मुताबिक भी कार्रवाइयां लागू की जा सकती हैं. KeyboardActionHandler उपलब्ध कराने पर, इसके onKeyboardAction तरीके को performDefaultAction फ़ंक्शन मिलता है. कस्टम लॉजिक में किसी भी समय इस performDefaultAction() फ़ंक्शन को कॉल किया जा सकता है. इससे, मौजूदा IME ऐक्शन से जुड़ा स्टैंडर्ड डिफ़ॉल्ट व्यवहार भी ट्रिगर हो जाएगा.

TextField(
    state = textFieldViewModel.usernameState,
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    onKeyboardAction = { performDefaultAction ->
        textFieldViewModel.validateUsername()
        performDefaultAction()
    }
)
StateBasedText.kt

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

इस स्टैंडर्ड नेविगेशन के अलावा, उपयोगकर्ता को अपना पासवर्ड डालने के लिए आगे बढ़ने से पहले, उपयोगकर्ता नाम की पुष्टि करने की प्रोसेस शुरू करनी होगी. यह पक्का करने के लिए कि कस्टम पुष्टि करने के इस लॉजिक के साथ-साथ, ImeAction.Next में मौजूद फ़ोकस स्विच करने का डिफ़ॉल्ट तरीका भी बना रहे, performDefaultAction() फ़ंक्शन को लागू किया जाता है. performDefaultAction() को कॉल करने पर, फ़ोकस मैनेजमेंट सिस्टम अपने-आप चालू हो जाता है. इससे फ़ोकस, अगले सही यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर चला जाता है. साथ ही, नेविगेशन का अनुमानित फ़्लो बना रहता है.

सुरक्षित पासवर्ड फ़ील्ड बनाना

SecureTextField एक कंपोज़ेबल है. इसे स्टेट-आधारित टेक्स्ट फ़ील्ड के ऊपर बनाया गया है. इसका इस्तेमाल पासवर्ड फ़ील्ड लिखने के लिए किया जाता है. हमारा सुझाव है कि पासवर्ड टेक्स्ट फ़ील्ड बनाने के लिए, SecureTextField का इस्तेमाल करें. ऐसा इसलिए, क्योंकि यह डिफ़ॉल्ट रूप से वर्ण इनपुट को छिपाता है. साथ ही, कट करने और कॉपी करने की कार्रवाइयों को बंद कर देता है.

SecureTextField में textObfuscationMode होता है. इससे यह कंट्रोल होता है कि उपयोगकर्ता को वर्ण इनपुट कैसे दिखता है. textObfuscationMode के पास ये विकल्प होते हैं:

• Hidden: इससे सभी इनपुट छिप जाते हैं. डेस्कटॉप प्लैटफ़ॉर्म पर डिफ़ॉल्ट बिहेवियर.

  

• Visible: इसमें सभी इनपुट दिखते हैं.

  

• RevealLastTyped: आखिरी वर्ण को छोड़कर, सभी इनपुट को छिपाता है. मोबाइल डिवाइसों पर डिफ़ॉल्ट व्यवहार.

  

अन्य संसाधन

• टेक्स्ट फ़ील्ड में फ़ोन नंबर को अपने-आप फ़ॉर्मैट करना
• उपयोगकर्ता के टॉगल के आधार पर पासवर्ड दिखाना या छिपाना
• उपयोगकर्ता के टाइप करते समय इनपुट की पुष्टि करना