TextField
ব্যবহারকারীদের পাঠ্য প্রবেশ এবং পরিবর্তন করতে দেয়। এই পৃষ্ঠাটি বর্ণনা করে কিভাবে আপনি TextField
, স্টাইল TextField
ইনপুট প্রয়োগ করতে পারেন এবং অন্যান্য TextField
বিকল্পগুলি কনফিগার করতে পারেন, যেমন কীবোর্ড বিকল্পগুলি এবং ব্যবহারকারীর ইনপুটকে দৃশ্যমানভাবে রূপান্তর করা৷
TextField
বাস্তবায়ন নির্বাচন করুন
TextField
বাস্তবায়নের দুটি স্তর রয়েছে:
-
TextField
হল মেটেরিয়াল ডিজাইন বাস্তবায়ন। আমরা আপনাকে এই বাস্তবায়নটি বেছে নেওয়ার পরামর্শ দিচ্ছি কারণ এটি মেটেরিয়াল ডিজাইন নির্দেশিকা অনুসরণ করে: -
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) ) }
যখন আপনার ডিজাইনে মেটেরিয়াল TextField
বা OutlineTextField
প্রয়োজন হয় তখন আমরা BasicTextField
উপরে TextField
সুপারিশ করি৷ যাইহোক, BasicTextField
এমন ডিজাইন তৈরি করার সময় ব্যবহার করা উচিত যাতে উপাদানের বৈশিষ্ট্য থেকে সজ্জার প্রয়োজন হয় না।
ব্রাশ API সহ স্টাইল ইনপুট
আপনি আপনার TextField
এ আরও উন্নত স্টাইলিং এর জন্য Brush API ব্যবহার করতে পারেন। নিম্নলিখিত বিভাগে বর্ণনা করা হয়েছে কিভাবে আপনি TextField
ইনপুটে একটি রঙিন গ্রেডিয়েন্ট যোগ করতে ব্রাশ ব্যবহার করতে পারেন।
টেক্সট স্টাইল করতে ব্রাশ API ব্যবহার সম্পর্কে আরও তথ্যের জন্য, ব্রাশ API-এর সাথে উন্নত স্টাইলিং সক্ষম করুন দেখুন।
TextStyle
ব্যবহার করে রঙিন গ্রেডিয়েন্ট প্রয়োগ করুন
একটি TextField
মধ্যে টাইপ করার সাথে সাথে একটি রঙিন গ্রেডিয়েন্ট বাস্তবায়ন করতে, আপনার TextField
জন্য আপনার পছন্দের ব্রাশটিকে একটি TextStyle
হিসাবে সেট করুন। এই উদাহরণে, TextField
টেক্সট টাইপ করার সাথে সাথে রেইনবো গ্রেডিয়েন্ট প্রভাব দেখতে আমরা একটি linearGradient
সহ একটি অন্তর্নির্মিত ব্রাশ ব্যবহার করি।
var text by remember { mutableStateOf("") } val brush = remember { Brush.linearGradient( colors = rainbowColors ) } TextField( value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush) )
![বিল্ডঅ্যানোটেটেড স্ট্রিং এবং স্প্যানস্টাইল ব্যবহার করে, লিনিয়ার গ্রেডিয়েন্ট সহ, শুধুমাত্র পাঠ্যের একটি অংশ কাস্টমাইজ করতে।](https://developer.android.com/static/develop/ui/compose/images/text-textfieldgradient.gif?authuser=1&hl=bn)
buildAnnotatedString
এবং SpanStyle
ব্যবহার করে, linearGradient
সাথে, শুধুমাত্র পাঠ্যের একটি অংশ কাস্টমাইজ করতে।কীবোর্ড বিকল্প সেট করুন
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
ব্যবহার করুন :TextField
স্টেটকে উপস্থাপন করতেStateFlow
এর মতো প্রতিক্রিয়াশীল স্ট্রীম ব্যবহার করা এড়িয়ে চলুন, কারণ এই কাঠামোগুলি অ্যাসিঙ্ক্রোনাস বিলম্বের পরিচয় দিতে পারে।
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
এ রাজ্যটি উত্তোলন করা সঠিক। যদি এটি না হয়, আপনি সত্যের উত্স হিসাবে কম্পোজেবল বা একটি রাষ্ট্র ধারক শ্রেণী ব্যবহার করতে পারেন। আপনার রাজ্য কোথায় উত্তোলন করবেন সে সম্পর্কে আরও জানতে, রাজ্য উত্তোলন ডকুমেন্টেশন দেখুন।
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- আপনার রচনা UI আর্কিটেক্ট করা হচ্ছে
- রাজ্য এবং জেটপ্যাক রচনা
- রচনায় UI অবস্থা সংরক্ষণ করুন