TextField
उपयोगकर्ताओं को टेक्स्ट डालने और उसमें बदलाव करने की सुविधा देता है. इस पेज में बताया गया है कि
TextField
को लागू कर सकता है और TextField
इनपुट को स्टाइल कर सकता है. साथ ही, इसे कॉन्फ़िगर कर सकता है
TextField
के अन्य विकल्प, जैसे कि कीबोर्ड के विकल्प और विज़ुअल तौर पर बदलाव करना
उपयोगकर्ता का इनपुट.
TextField
लागू करने का तरीका चुनें
TextField
को लागू करने के दो लेवल हैं:
TextField
मटीरियल डिज़ाइन लागू करने की प्रक्रिया है. हमारा सुझाव है कि आप इसे लागू करने के बाद, यह मटीरियल डिज़ाइन को फ़ॉलो करता है दिशा-निर्देश:- डिफ़ॉल्ट स्टाइलिंग भरा हुई है
OutlinedTextField
आउटलाइन स्टाइलिंग वर्शन
BasicTextField
की मदद से उपयोगकर्ता, हार्डवेयर या सॉफ़्टवेयर के ज़रिए टेक्स्ट में बदलाव कर सकते हैं कीबोर्ड, लेकिन संकेत या प्लेसहोल्डर जैसी कोई सजावट नहीं करता.
@Composable fun SimpleFilledTextFieldSample() { var text by remember { mutableStateOf("Hello") } TextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
@Composable fun SimpleOutlinedTextFieldSample() { var text by remember { mutableStateOf("") } OutlinedTextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
शैली 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) ) }
हम BasicTextField
से ज़्यादा TextField
का सुझाव देते हैं. ऐसा तब करें, जब आपके डिज़ाइन के लिए
सामग्री TextField
या OutlineTextField
. हालांकि, BasicTextField
का इस्तेमाल किया जाना चाहिए
ऐसी डिज़ाइन बनाते समय इस्तेमाल करें जिसे मटीरियल स्पेसिफ़िकेशन में सजावट की ज़रूरत न हो.
ब्रश एपीआई की मदद से स्टाइल इनपुट
अपने TextField
में ज़्यादा बेहतर स्टाइलिंग के लिए, Brush API का इस्तेमाल करें. कॉन्टेंट बनाने
नीचे दिए गए सेक्शन में बताया गया है कि रंगीन ग्रेडिएंट जोड़ने के लिए ब्रश का इस्तेमाल कैसे किया जा सकता है
TextField
इनपुट के लिए.
लेख को शैली देने के लिए ब्रश 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) )
![टेक्स्ट के सिर्फ़ किसी हिस्से को पसंद के मुताबिक बनाने के लिए, लीनियर ग्रेडिएंट के साथ-साथ बिल्डएनोटेटेड स्ट्रिंग और SpanStyle का इस्तेमाल करना.](https://developer.android.com/static/develop/ui/compose/images/text-textfieldgradient.gif?authuser=9&hl=hi)
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) ) }
VisualTransformationSamples
सोर्स कोड में और उदाहरण उपलब्ध हैं.
इनपुट साफ़ करें
टेक्स्ट में बदलाव करते समय एक सामान्य टास्क यह है कि मुख्य वर्णों को हटा दिया जाए या कुछ और हर बार इनपुट स्ट्रिंग बदलने पर उसे पूरी तरह बदल देगा.
मॉडल के तौर पर, आपको यह मानना चाहिए कि कीबोर्ड
हर onValueChange
में बदलाव करता है. उदाहरण के लिए, ऐसा तब हो सकता है, जब उपयोगकर्ता
ऑटो करेक्ट, शब्द को इमोजी से बदला जाता है या बदलाव करने की दूसरी स्मार्ट सुविधाएं इस्तेमाल की जाती हैं. यहां की यात्रा पर हूं
इसे सही तरीके से हैंडल करने के लिए, ट्रांसफ़ॉर्मेशन लॉजिक को इस तरह लिखें कि
onValueChange
को पास किया गया मौजूदा टेक्स्ट, पिछले या अगले टेक्स्ट से मेल नहीं खाता
वे वैल्यू होती हैं जिन्हें onValueChange
को पास किया जाएगा.
शुरुआत में शून्यों को अनुमति न देने वाले टेक्स्ट फ़ील्ड को लागू करने के लिए, ऐसा करके ऐसा किया जा सकता है वैल्यू बदलने पर, सभी शुरुआती शून्य को हटाना.
@Composable fun NoLeadingZeroes() { var input by rememberSaveable { mutableStateOf("") } TextField( value = input, onValueChange = { newText -> input = newText.trimStart { it == '0' } } ) }
टेक्स्ट साफ़ करते समय कर्सर की पोज़िशन कंट्रोल करने के लिए, TextFieldValue
का इस्तेमाल करें
TextField
का ओवरलोड
राज्य के हिस्से के तौर पर शामिल हैं.
राज्य के हिसाब से सबसे सही तरीके
TextField
को तय करने और अपडेट करने के सबसे सही तरीकों की सीरीज़ यहां दी गई है
आपके ऐप्लिकेशन में इनपुट समस्याओं को रोकने के लिए है.
TextField
राज्य को दिखाने के लिएMutableState
का इस्तेमाल करें: इससे बचेंStateFlow
जैसी रिऐक्टिव स्ट्रीम का इस्तेमाल करके,TextField
के स्टेटस में बदलाव होता है, क्योंकि इन स्ट्रक्चर में एसिंक्रोनस देरी हो सकती है.
class SignUpViewModel : ViewModel() { var username by mutableStateOf("") private set /* ... */ }
- राज्य अपडेट करने में होने वाली देरी से बचने के लिए:
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) } /*...*/ ) }
- राज्य की जानकारी कहां दें: अगर आपके
TextField
राज्य के लिए कारोबार की ज़रूरत है आपके टाइप करते ही लॉजिक वैलिडेशन होता है. यह सही है किViewModel
. अगर ऐसा नहीं है, तो कंपोज़ेबल या स्टेट होल्डर क्लास का इस्तेमाल सबसे अहम सोर्स होती हैं. अपने राज्य को बढ़ाने के बारे में ज़्यादा जानने के लिए यहां देखें: स्टेट लिफ़्टिंग से जुड़े दस्तावेज़.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- अपना Compose यूज़र इंटरफ़ेस (यूआई) बनाना
- स्टेट और Jetpack Compose
- Compose में यूज़र इंटरफ़ेस (यूआई) की स्थिति सेव करना