Android Academy · पाठ

TextField और उपयोगकर्ता इनपुट

Compose में उपयोगकर्ता से टेक्स्ट प्राप्त करें।

पाठ 1, कुल 4 में से13 चरण

TextField और उपयोगकर्ता इनपुट, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

उपयोगकर्ता का इनपुट लेना

लगभग हर वास्तविक ऐप को उपयोगकर्ता से कुछ न कुछ पूछना पड़ता है: नाम, ईमेल या खोज क्वेरी। Jetpack Compose में पाठ दर्ज करने का मूल घटक TextField है।

इस पाठ में आप सीखेंगे कि टेक्स्ट फ़ील्ड कैसे दिखाएँ, उपयोगकर्ता द्वारा टाइप की गई सामग्री कैसे पढ़ें और फ़ील्ड को अपने ऐप की स्थिति के साथ समन्वयित कैसे रखें। यह आपके द्वारा बनाए जाने वाले हर फ़ॉर्म की नींव है।

आपका पहला TextField

TextField को दो चीज़ों की आवश्यकता होती है: दिखाने के लिए वर्तमान पाठ वाला value और उपयोगकर्ता के टाइप करने पर क्या करना है, यह बताने वाला onValueChange कॉलबैक।

Compose घोषणात्मक है, इसलिए फ़ील्ड अपना पाठ स्वयं संग्रहीत नहीं करता। आप पाठ को स्थिति में रखते हैं और उसे वापस फ़ील्ड में देते हैं। इस तरीके को स्थिति ऊपर उठाना कहा जाता है।

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

मान का चक्र कैसे काम करता है

सबसे महत्वपूर्ण बात यह है: TextField में वही दिखता है जो आप value को देते हैं। उपयोगकर्ता कोई कुंजी दबाता है, तो Compose नए पाठ के साथ onValueChange को कॉल करता है।

आप उस नए पाठ को स्थिति में सहेजते हैं।
स्थिति में बदलाव से पुनर्संयोजन शुरू होता है।
अपडेट किए गए value के साथ फ़ील्ड फिर से बनाई जाती है।

यदि आप onValueChange के अंदर स्थिति अपडेट करना भूल जाते हैं, तो फ़ील्ड स्थिर दिखाई देगी, क्योंकि value कभी नहीं बदलता।

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

लेबल और प्लेसहोल्डर जोड़ना

सादा टेक्स्ट फ़ील्ड उपयोगकर्ता को यह संकेत नहीं देता कि क्या टाइप करना है। एक label जोड़ें (जो फ़ील्ड के ऊपर तैरता है) और एक placeholder जोड़ें (जो फ़ील्ड खाली होने पर संकेत दिखाता है)।

ये छोटे सुधार फ़ॉर्म को समझना बहुत आसान बना देते हैं।

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design में दो मुख्य शैलियाँ हैं। TextField की पृष्ठभूमि भरी हुई होती है, जबकि OutlinedTextField फ़ील्ड के चारों ओर सीमा बनाता है। दोनों एक ही API साझा करते हैं, इसलिए इनके बीच बदलना बहुत आसान है।

फ़ॉर्म में आउटलाइन वाले फ़ील्ड लोकप्रिय हैं, क्योंकि उन्हें लंबवत रूप से रखने पर वे स्पष्ट दिखाई देते हैं।

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

आरंभिक और अंतिम आइकन

आप फ़ील्ड को आइकन से सजा सकते हैं। leadingIcon शुरुआत में दिखाई देता है (खोज या ईमेल के चिह्न के लिए उपयोगी) और trailingIcon अंत में (अक्सर साफ़ करने वाला बटन)।

आइकन देखकर ही फ़ील्ड का उद्देश्य तुरंत स्पष्ट हो जाता है।

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

साफ़ करने वाला बटन

एक सामान्य UX तरीका फ़ील्ड साफ़ करने वाला छोटा "x" दिखाना है। इसे केवल तभी दिखाएँ जब कोई पाठ मौजूद हो, और इसके लिए trailingIcon स्लॉट तथा IconButton का उपयोग करें।

ध्यान दें कि साफ़ करना केवल स्थिति को खाली स्ट्रिंग पर वापस सेट करना है।

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

एक पंक्ति बनाम कई पंक्तियाँ

डिफ़ॉल्ट रूप से TextField कई पंक्तियों तक बढ़ सकता है। नाम या ईमेल जैसी चीज़ों के लिए singleLine = true सेट करें, ताकि उपयोगकर्ता नई पंक्ति न डाल सके।

लंबे नोट्स के लिए इसे बहुपंक्ति वाला रहने दें और चाहें तो maxLines से ऊँचाई सीमित करें।

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

इनपुट पर तुरंत प्रतिक्रिया देना

क्योंकि टेक्स्ट की स्थिति आपके नियंत्रण में है, आप उस पर तुरंत प्रतिक्रिया दे सकते हैं। इसका एक सामान्य उदाहरण फ़ील्ड के नीचे अक्षरों की लाइव गिनती दिखाना है।

हर कुंजी दबाने पर text अपडेट होता है, जिससे फ़ील्ड और उसके नीचे की गिनती दोनों का पुनर्संयोजन होता है।

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

इनपुट बदलना

कभी-कभी आप उपयोगकर्ता द्वारा टाइप की गई सामग्री को सहेजने से पहले सामान्य रूप में बदलना चाहते हैं। onValueChange के अंदर आप नए मान को पहले बदल सकते हैं।

यहाँ हम username को छोटे अक्षरों में बदलते हैं और रिक्त स्थान हटाते हैं। चक्र आपके नियंत्रण में होने के कारण फ़ील्ड हमेशा साफ़ किया हुआ संस्करण दिखाती है।

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

शुद्ध Kotlin: हैंडल साफ़ करना

ऊपर दिया गया रूपांतरण तर्क केवल साधारण Kotlin है। आप इसे Android के बिना अलग से जाँच सकते हैं। यहाँ वही सफ़ाई नियम स्वतंत्र रूप से चल रहा है।

इस तरह के तर्क को शुद्ध फ़ंक्शन में रखने से यूनिट जाँच करना आसान हो जाता है।

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

त्वरित जाँच

यदि TextField का onValueChange कॉलबैक value को दी गई स्थिति को कभी अपडेट न करे, तो क्या होगा?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

अब आप Compose में टेक्स्ट इनपुट की मूल बातें जानते हैं:

TextField और OutlinedTextField में value और onValueChange कॉलबैक दिए जाते हैं।
आप पाठ को remember { mutableStateOf(...) } में रखते हैं और हर बदलाव पर अपडेट करते हैं (स्थिति ऊपर उठाना)।
label, placeholder, आरंभिक/अंतिम आइकन और singleLine रूप और व्यवहार तय करते हैं।
स्थिति आपके नियंत्रण में होने के कारण आप उपयोगकर्ता के टाइप करते समय तुरंत प्रतिक्रिया दे सकते हैं या इनपुट बदल सकते हैं।

अगला विषय: केवल एक फ़ील्ड की नहीं, बल्कि पूरे फ़ॉर्म की स्थिति संभालना।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 36
पाठ: 152

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “TextField और उपयोगकर्ता इनपुट” पाठ निःशुल्क है?

हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “TextField और उपयोगकर्ता इनपुट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“TextField और उपयोगकर्ता इनपुट” में मैं क्या सीखूँगा?

Compose में उपयोगकर्ता से टेक्स्ट प्राप्त करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“TextField और उपयोगकर्ता इनपुट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Android Academy पर वापस जाएँ