Jetpack Compose Academy · पाठ

TextField और OutlinedTextField

उपयोगकर्ता द्वारा लिखे गए text को पढ़िए।

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

TextField और OutlinedTextField, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टेक्स्ट फ़ील्ड क्यों महत्वपूर्ण हैं

लगभग हर ऐप उपयोगकर्ता से कुछ लिखने को कहता है। कम्पोज़ में TextField उस इनपुट को पढ़ने का आपका माध्यम है। ✏️

TextField कम्पोज़ेबल

TextField एक संपादन योग्य बॉक्स दिखाता है। इसे वर्तमान मान और ऐसा कॉलबैक चाहिए जो हर बार टेक्स्ट बदलने पर चले।

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

स्टेट मान को नियंत्रित करता है

फ़ील्ड स्वयं टेक्स्ट नहीं रखता। आप इसे state में रखते हैं और वापस फ़ील्ड में देते हैं, ताकि यूआई हमेशा नवीनतम मान दिखाए।

var name by remember { mutableStateOf("") }

onValueChange चक्र पूरा करता है

हर कुंजी दबाने पर onValueChange नए टेक्स्ट के साथ चलता है। आप उसे स्टेट में सहेजते हैं, कम्पोज़ स्क्रीन फिर बनाता है और फ़ील्ड लिखा हुआ टेक्स्ट दिखाता है।

onValueChange = { newText -> name = newText }

OutlinedTextField से मिलिए

OutlinedTextField बिल्कुल उसी तरह काम करता है, लेकिन भरे हुए बैकग्राउंड के बजाय इनपुट के चारों ओर साफ़ बॉर्डर बनाता है।

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

भरा हुआ बनाम आउटलाइन वाला

filled TextField में छायांकित बॉक्स और नीचे एक रेखा होती है। आउटलाइन वाला हल्का और खुला दिखाई देता है। दोनों एक जैसा व्यवहार करते हैं, इसलिए शैली के आधार पर चुनें।

लेबल जोड़ें

label उपयोगकर्ता को बताता है कि फ़ील्ड किस काम के लिए है। फ़ील्ड पर फ़ोकस होने या उसमें टेक्स्ट भरने पर यह टेक्स्ट के ऊपर तैरने लगता है।

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)

डिफ़ॉल्ट रूप से एक पंक्ति

इनपुट को एक ही पंक्ति में रखने के लिए singleLine को true पर सेट करें। तब कीबोर्ड नई पंक्ति के बजाय पूरा करने की क्रिया दिखाएगा।

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

मान को कहीं भी पढ़ें

टेक्स्ट स्टेट में रहता है, इसलिए कोई भी दूसरा कम्पोज़ेबल उसे पढ़ सकता है। उपयोगकर्ता का नाम लिखना पूरा करते ही उसका अभिवादन करें। 👋

Text("Hello, " + name)

यह नियंत्रित फ़ील्ड है

कम्पोज़ फ़ील्ड controlled होते हैं: आप value के रूप में जो देते हैं, वही दिखता है। स्टेट अपडेट करना भूल जाएँ, तो फ़ील्ड स्थिर दिखाई देगा।

सरल शुरुआत, बाद में विस्तार

एक मान और onValueChange ही वास्तव में आवश्यक हैं। लेबल, आइकन और सत्यापन बाद में जोड़े जाने वाले अतिरिक्त भाग हैं।

त्वरित जाँच

हर कुंजी दबाने पर उपयोगकर्ता का नया टेक्स्ट किस पैरामीटर में मिलता है?

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

पुनरावृत्ति

आपने TextField और OutlinedTextField देखे: स्टेट से मान जोड़ें, onValueChange में उसे अपडेट करें और लेबल जोड़ें। कम्पोज़ में यही टेक्स्ट इनपुट है। 🎉

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

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

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

पाठ्यक्रम: 30
पाठ: 120

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

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

क्या “TextField और OutlinedTextField” पाठ निःशुल्क है?

हाँ—“TextField और OutlinedTextField” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“TextField और OutlinedTextField” में मैं क्या सीखूँगा?

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

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

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

“TextField और OutlinedTextField” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

← Jetpack Compose Academy पर वापस जाएँ