TextField ব্যবহারকারীদের টেক্সট প্রবেশ করাতে এবং পরিবর্তন করতে দেয়। আপনি দুই ধরনের টেক্সট ফিল্ড ব্যবহার করতে পারেন: স্টেট-ভিত্তিক টেক্সট ফিল্ড এবং ভ্যালু-ভিত্তিক টেক্সট ফিল্ড । আপনি যে ধরনের কন্টেন্ট প্রদর্শন করতে চান তা নির্বাচন করুন:
আমরা স্টেট-ভিত্তিক টেক্সট ফিল্ড ব্যবহার করার পরামর্শ দিই, কারণ এটি একটি TextField অবস্থা ব্যবস্থাপনার জন্য আরও সম্পূর্ণ এবং নির্ভরযোগ্য একটি পদ্ধতি প্রদান করে। নিম্নলিখিত সারণিতে এই ধরণের টেক্সট ফিল্ডগুলির মধ্যে পার্থক্য তুলে ধরা হয়েছে এবং এতে স্টেট-ভিত্তিক টেক্সট ফিল্ডগুলির প্রধান সুবিধাসমূহ অন্তর্ভুক্ত রয়েছে:
বৈশিষ্ট্য | মান-ভিত্তিক পাঠ্য ক্ষেত্র | রাজ্য-ভিত্তিক পাঠ্য ক্ষেত্র | রাজ্যভিত্তিক সুবিধা |
|---|---|---|---|
রাষ্ট্রীয় ব্যবস্থাপনা | | টেক্সট ইনপুটের অবস্থা (মান, নির্বাচন এবং গঠন) পরিচালনা করার জন্য সুস্পষ্টভাবে একটি |
|
দৃশ্যমান রূপান্তর | প্রদর্শিত টেক্সটের চেহারা পরিবর্তন করার জন্য | ব্যবহারকারীর ইনপুট স্টেটে যুক্ত করার আগে তা পরিবর্তন করার জন্য |
|
লাইন সীমা | লাইনের সংখ্যা নিয়ন্ত্রণ করতে | টেক্সট ফিল্ডটি সর্বনিম্ন ও সর্বোচ্চ কতগুলো লাইন জুড়ে থাকতে পারবে, তা নির্ধারণ করতে |
|
সুরক্ষিত পাঠ্য ক্ষেত্র | প্রযোজ্য নয় | |
|
এই পৃষ্ঠায় বর্ণনা করা হয়েছে কীভাবে আপনি TextField ইমপ্লিমেন্ট করতে পারেন, TextField ইনপুট স্টাইল করতে পারেন এবং অন্যান্য অপশন, যেমন TextField অপশন ও ব্যবহারকারীর ইনপুটের দৃশ্যগত পরিবর্তন, কনফিগার করতে পারেন।
TextField বাস্তবায়ন বেছে নিন
TextField বাস্তবায়নের দুটি স্তর রয়েছে:
-
TextFieldহলো ম্যাটেরিয়াল ডিজাইনের একটি বাস্তবায়ন। আমরা আপনাকে এই বাস্তবায়নটি বেছে নেওয়ার পরামর্শ দিই, কারণ এটি ম্যাটেরিয়াল ডিজাইনের নির্দেশিকা অনুসরণ করে:- ডিফল্ট স্টাইলিং পূরণ করা হয়েছে
-
OutlinedTextFieldহল আউটলাইন করা স্টাইলিং সংস্করণ
-
BasicTextFieldব্যবহারকারীদের হার্ডওয়্যার বা সফটওয়্যার কীবোর্ড ব্যবহার করে টেক্সট সম্পাদনা করার সুযোগ দেয়, কিন্তু এটি হিন্ট বা প্লেসহোল্ডারের মতো কোনো অতিরিক্ত সুবিধা প্রদান করে না।
TextField( state = rememberTextFieldState(initialText = "Hello"), label = { Text("Label") } )

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

স্টাইল 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) )

আপনার ডিজাইনে যখন Material TextField বা OutlinedTextField প্রয়োজন হয়, তখন আমরা BasicTextField পরিবর্তে TextField ব্যবহারের পরামর্শ দিই। তবে, এমন ডিজাইন তৈরির ক্ষেত্রে BasicTextField ব্যবহার করা উচিত, যেগুলোতে Material স্পেসিফিকেশনের ডেকোরেশনগুলোর প্রয়োজন নেই।
ব্রাশ এপিআই দিয়ে ইনপুট স্টাইল করুন
আপনার TextField আরও উন্নত স্টাইলিংয়ের জন্য আপনি ব্রাশ এপিআই (Brush API) ব্যবহার করতে পারেন। নিচের অংশে বর্ণনা করা হয়েছে, কীভাবে একটি ব্রাশ ব্যবহার করে TextField ইনপুটে রঙিন গ্রেডিয়েন্ট যোগ করা যায়।
ব্রাশ এপিআই ব্যবহার করে টেক্সট স্টাইল করার বিষয়ে আরও তথ্যের জন্য, “ব্রাশ এপিআই দিয়ে উন্নত স্টাইলিং সক্ষম করুন” দেখুন।
TextStyle ব্যবহার করে রঙিন গ্রেডিয়েন্ট প্রয়োগ করুন
TextField টাইপ করার সময় একটি রঙিন গ্রেডিয়েন্ট প্রয়োগ করতে, আপনার পছন্দের ব্রাশটিকে TextField TextStyle হিসেবে সেট করুন। এই উদাহরণে, TextField টেক্সট টাইপ করার সাথে সাথে রংধনু গ্রেডিয়েন্ট এফেক্টটি দেখানোর জন্য আমরা linearGradient সহ একটি বিল্ট-ইন ব্রাশ ব্যবহার করেছি।
val brush = remember { Brush.linearGradient( colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta) ) } TextField( state = rememberTextFieldState(), textStyle = TextStyle(brush = brush) )

TextField বিষয়বস্তুর জন্য একটি রংধনু গ্রেডিয়েন্ট প্রভাব। টেক্সট ফিল্ডের অবস্থা পরিচালনা করুন
TextField তার কন্টেন্ট এবং সিলেকশনের জন্য TextFieldState নামক একটি ডেডিকেটেড স্টেট হোল্ডার ক্লাস ব্যবহার করে। TextFieldState এমনভাবে ডিজাইন করা হয়েছে যাতে আপনার আর্কিটেকচারে যেখানে প্রয়োজন সেখানেই এটিকে হোয়িস্ট করা যায়। TextFieldState এর দুটি প্রধান প্রপার্টি রয়েছে:
-
initialText:TextFieldবিষয়বস্তু। -
initialSelection: কার্সার বা নির্বাচিত অংশটি কোথায় রয়েছে তা নির্দেশ করে।
onValueChange কলব্যাকের মতো অন্যান্য পদ্ধতি থেকে TextFieldState যা আলাদা করে, তা হলো TextFieldState সম্পূর্ণ ইনপুট প্রবাহকে পুরোপুরিভাবে ধারণ করে। এর মধ্যে অন্তর্ভুক্ত রয়েছে সঠিক ব্যাকিং ডেটা স্ট্রাকচার ব্যবহার করা, ফিল্টার ও ফরম্যাটার ইনলাইন করা এবং বিভিন্ন উৎস থেকে আসা সমস্ত সম্পাদনাকে সিঙ্ক্রোনাইজ করা।
আপনি TextField এর স্টেট হোইস্ট করতে TextFieldState() ব্যবহার করতে পারেন। এর জন্য, আমরা rememberTextFieldState() ফাংশনটি ব্যবহার করার পরামর্শ দিই। rememberTextFieldState() আপনার কম্পোজেবলে TextFieldState ইনস্ট্যান্স তৈরি করে, স্টেট অবজেক্টটি মনে রাখা নিশ্চিত করে এবং বিল্ট-ইন সেভ ও রিস্টোর কার্যকারিতা প্রদান করে।
val usernameState = rememberTextFieldState() TextField( state = usernameState, lineLimits = TextFieldLineLimits.SingleLine, placeholder = { Text("Enter Username") } )
rememberTextFieldState এর একটি ফাঁকা প্যারামিটার থাকতে পারে অথবা ইনিশিয়ালাইজেশনের সময় টেক্সটের মান বোঝানোর জন্য একটি প্রাথমিক মান পাস করা যেতে পারে। পরবর্তী কোনো পুনর্গঠনে যদি একটি ভিন্ন মান পাস করা হয়, তবে স্টেটের মান আপডেট হয় না। ইনিশিয়ালাইজ করার পরে স্টেটটি আপডেট করতে, TextFieldState এর উপর `edit` মেথডগুলো কল করুন।
TextField( state = rememberTextFieldState(initialText = "Username"), lineLimits = TextFieldLineLimits.SingleLine, )

TextField যার প্রাথমিক লেখা 'Username'। TextFieldBuffer ব্যবহার করে টেক্সট পরিবর্তন করুন
একটি TextFieldBuffer একটি সম্পাদনাযোগ্য টেক্সট কন্টেইনার হিসেবে কাজ করে, যা কার্যকারিতার দিক থেকে একটি StringBuilder এর অনুরূপ। এটি টেক্সট কন্টেন্ট এবং নির্বাচিত অংশ সম্পর্কিত তথ্য উভয়ই ধারণ করে।
আপনি প্রায়শই TextFieldState.edit , InputTransformation.transformInput , বা OutputTransformation.transformOutput মতো ফাংশনগুলিতে রিসিভার স্কোপ হিসেবে TextFieldBuffer সম্মুখীন হন। এই ফাংশনগুলিতে, আপনি প্রয়োজন অনুযায়ী TextFieldBuffer পড়তে বা আপডেট করতে পারেন। এরপর, এই পরিবর্তনগুলি হয় TextFieldState এ কমিট করা হয়, অথবা OutputTransformation এর ক্ষেত্রে রেন্ডারিং পাইপলাইনে পাঠানো হয়।
বাফারের বিষয়বস্তু পরিবর্তন করতে আপনি append , insert , replace , বা delete মতো সাধারণ এডিটিং ফাংশনগুলো ব্যবহার করতে পারেন। সিলেকশনের অবস্থা পরিবর্তন করতে, হয় সরাসরি এর selection: TextRange ভেরিয়েবলটি সেট করুন, অথবা placeCursorAtEnd বা selectAll মতো ইউটিলিটি ফাংশন ব্যবহার করুন। সিলেকশনটি একটি TextRange দ্বারা প্রকাশ করা হয়, যেখানে শুরুর ইনডেক্সটি অন্তর্ভুক্ত এবং শেষের ইনডেক্সটি বর্জনীয়। একই শুরু এবং শেষের মান সহ একটি TextRange , যেমন (3, 3) , এমন একটি কার্সরের অবস্থান বোঝায় যেখানে কোনো অক্ষর নির্বাচিত নেই।
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, "-") } )
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)
setTextAndPlaceCursorAtEnd: বর্তমান টেক্সট মুছে দিয়ে তার জায়গায় প্রদত্ত টেক্সটটি বসায় এবং কার্সরটিকে টেক্সটের শেষে সেট করে।textFieldState.setTextAndPlaceCursorAtEnd("I really love Android") // textFieldState.text : I really love Android // textFieldState.selection : TextRange(21, 21)
clearText: সমস্ত লেখা মুছে দেয়।textFieldState.clearText() // textFieldState.text : // textFieldState.selection : TextRange(0, 0)
অন্যান্য TextFieldState ফাংশনগুলোর জন্য, TextFieldState রেফারেন্স দেখুন।
ব্যবহারকারীর ইনপুট পরিবর্তন করুন
নিম্নলিখিত বিভাগগুলিতে ব্যবহারকারীর ইনপুট কীভাবে পরিবর্তন করতে হয় তা বর্ণনা করা হয়েছে। ইনপুট ট্রান্সফরমেশন ব্যবহারকারীকে টাইপ করার সময় TextField ইনপুট ফিল্টার করতে দেয়, অন্যদিকে আউটপুট ট্রান্সফরমেশন স্ক্রিনে প্রদর্শিত হওয়ার আগে ব্যবহারকারীর ইনপুটকে ফরম্যাট করে।
ইনপুট রূপান্তরের মাধ্যমে ব্যবহারকারীর ইনপুট ফিল্টার করুন
ইনপুট ট্রান্সফরমেশন আপনাকে ব্যবহারকারীর দেওয়া ইনপুট ফিল্টার করতে সাহায্য করে। উদাহরণস্বরূপ, যদি আপনার TextField একটি আমেরিকান ফোন নম্বর গ্রহণ করে, তবে আপনি কেবল ১০টি ডিজিটই গ্রহণ করতে চাইবেন। InputTransformation ফলাফল TextFieldState -এ সংরক্ষিত হয়।
সাধারণ InputTransformation ব্যবহারের জন্য অন্তর্নির্মিত ফিল্টার রয়েছে। দৈর্ঘ্য সীমিত করতে, InputTransformation.maxLength() কল করুন:
TextField( state = rememberTextFieldState(), lineLimits = TextFieldLineLimits.SingleLine, inputTransformation = InputTransformation.maxLength(10) )
কাস্টম ইনপুট রূপান্তর
InputTransformation একটি একক ফাংশন ইন্টারফেস। আপনার নিজস্ব InputTransformation প্রয়োগ করার সময়, আপনাকে TextFieldBuffer.transformInput ওভাররাইড করতে হবে:
class CustomInputTransformation : InputTransformation { override fun TextFieldBuffer.transformInput() { } }
ফোন নম্বরের জন্য, এমন একটি কাস্টম ইনপুট ট্রান্সফরমেশন যোগ করুন যা TextField শুধুমাত্র সংখ্যা টাইপ করার অনুমতি দেয়:
class DigitOnlyInputTransformation : InputTransformation { override fun TextFieldBuffer.transformInput() { if (!asCharSequence().isDigitsOnly()) { revertAllChanges() } } }
চেইন ইনপুট রূপান্তর
আপনার টেক্সট ইনপুটে একাধিক ফিল্টার যোগ করতে, ` then এক্সটেনশন ফাংশন ব্যবহার করে InputTransformation গুলোকে পরপর সাজান। ফিল্টারগুলো ক্রমানুসারে কার্যকর হয়। একটি উত্তম অভ্যাস হিসেবে, সবচেয়ে সুনির্দিষ্ট ফিল্টারগুলো প্রথমে প্রয়োগ করুন, যাতে এমন ডেটার উপর অপ্রয়োজনীয় রূপান্তর এড়ানো যায় যা শেষ পর্যন্ত ফিল্টার হয়ে বাদ পড়ে যাবে।
TextField( state = rememberTextFieldState(), inputTransformation = InputTransformation.maxLength(6) .then(CustomInputTransformation()), )
ইনপুট রূপান্তর যোগ করার পর, TextField ইনপুটটি সর্বোচ্চ ১০টি অঙ্ক গ্রহণ করে।
প্রদর্শনের আগে ইনপুট ফরম্যাট করুন।
OutputTransformation আপনাকে ব্যবহারকারীর ইনপুট স্ক্রিনে প্রদর্শিত হওয়ার আগে ফরম্যাট করার সুযোগ দেয়। InputTransformation মতো নয়, OutputTransformation এর মাধ্যমে করা ফরম্যাটিং TextFieldState এ সংরক্ষিত হয় না। আগের ফোন নম্বরের উদাহরণটির উপর ভিত্তি করে, আপনাকে উপযুক্ত স্থানে প্রথম বন্ধনী এবং ড্যাশ যোগ করতে হবে:

এটি ভ্যালু-ভিত্তিক TextField VisualTransformation ) পরিচালনার হালনাগাদ পদ্ধতি, যার একটি মূল পার্থক্য হলো আপনাকে এগুলোর অফসেট ম্যাপিং গণনা করতে হবে না।
OutputTransformation হলো একটি একক অ্যাবস্ট্রাক্ট মেথড ইন্টারফেস। একটি কাস্টম OutputTransformation ইমপ্লিমেন্ট করার জন্য, আপনাকে transformOutput মেথডটি ওভাররাইড করতে হবে:
class CustomOutputTransformation : OutputTransformation { override fun TextFieldBuffer.transformOutput() { } }
ফোন নম্বর ফরম্যাট করতে, আপনার OutputTransformation এ ০ ইন্ডেক্সে একটি প্রথম বন্ধনী, ৪ ইন্ডেক্সে একটি শেষ বন্ধনী এবং ৮ ইন্ডেক্সে একটি ড্যাশ যোগ করুন:
class PhoneNumberOutputTransformation : OutputTransformation { override fun TextFieldBuffer.transformOutput() { if (length > 0) insert(0, "(") if (length > 4) insert(4, ")") if (length > 8) insert(8, "-") } }
এরপর, TextField এ আপনার OutputTransformation যোগ করুন:
TextField( state = rememberTextFieldState(), outputTransformation = PhoneNumberOutputTransformation() )
রূপান্তরগুলি কীভাবে একসাথে কাজ করে
নিম্নলিখিত ডায়াগ্রামটি টেক্সট ইনপুট থেকে রূপান্তর হয়ে আউটপুট পর্যন্ত প্রবাহটি দেখায়:

- ইনপুট উৎস থেকে ইনপুট গ্রহণ করা হয়।
- ইনপুটটি একটি
InputTransformationমাধ্যমে ফিল্টার করা হয়, যা TextFieldState-এ সংরক্ষিত হয়। - ফরম্যাট করার জন্য ইনপুটটিকে একটি
OutputTransformationমধ্য দিয়ে পাঠানো হয়। - ইনপুটটি
TextFieldউপস্থাপন করা হয়।
কীবোর্ড বিকল্পগুলি সেট করুন
TextField আপনাকে কিবোর্ড কনফিগারেশন অপশন, যেমন কিবোর্ড লেআউট, সেট করতে দেয়, অথবা কিবোর্ডে সমর্থিত হলে অটোকারেক্ট চালু করার সুযোগ দেয়। সফটওয়্যার কিবোর্ডটি যদি এখানে দেওয়া অপশনগুলোর সাথে সামঞ্জস্যপূর্ণ না হয়, তবে কিছু অপশনের নিশ্চয়তা নাও দেওয়া হতে পারে। সমর্থিত কিবোর্ড অপশনগুলোর তালিকা নিচে দেওয়া হলো:
-
capitalization -
autoCorrect -
keyboardType -
imeAction
অতিরিক্ত সম্পদ
- টেক্সট ফিল্ডে ফোন নম্বর স্বয়ংক্রিয়ভাবে ফরম্যাট করুন
- ব্যবহারকারীর টগলের উপর ভিত্তি করে পাসওয়ার্ড দেখানো বা লুকানো
- ব্যবহারকারী টাইপ করার সাথে সাথে ইনপুট যাচাই করুন।