ব্যবহারকারীর ইনপুট পরিচালনা করুন

TextField ব্যবহারকারীদের পাঠ্য প্রবেশ এবং পরিবর্তন করতে দেয়। এই পৃষ্ঠাটি বর্ণনা করে কিভাবে আপনি TextField , স্টাইল TextField ইনপুট প্রয়োগ করতে পারেন এবং অন্যান্য TextField বিকল্পগুলি কনফিগার করতে পারেন, যেমন কীবোর্ড বিকল্পগুলি এবং ব্যবহারকারীর ইনপুটকে দৃশ্যমানভাবে রূপান্তর করা৷

TextField বাস্তবায়ন নির্বাচন করুন

TextField বাস্তবায়নের দুটি স্তর রয়েছে:

  1. TextField হল মেটেরিয়াল ডিজাইন বাস্তবায়ন। আমরা আপনাকে এই বাস্তবায়নটি বেছে নেওয়ার পরামর্শ দিচ্ছি কারণ এটি মেটেরিয়াল ডিজাইন নির্দেশিকা অনুসরণ করে:
  2. BasicTextField ব্যবহারকারীদের হার্ডওয়্যার বা সফ্টওয়্যার কীবোর্ডের মাধ্যমে পাঠ্য সম্পাদনা করতে সক্ষম করে, কিন্তু ইঙ্গিত বা স্থানধারকের মতো কোনো সজ্জা প্রদান করে না। 

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

শব্দটি সম্বলিত একটি সম্পাদনাযোগ্য পাঠ্য ক্ষেত্র

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

একটি সম্পাদনাযোগ্য পাঠ্য ক্ষেত্র, একটি বেগুনি সীমানা এবং লেবেল সহ।

স্টাইল 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)
    )
}
TextSnippets.kt

দুটি সম্পাদনাযোগ্য লাইন এবং লেবেল সহ একটি মাল্টিলাইন টেক্সটফিল্ড৷

যখন আপনার ডিজাইনে মেটেরিয়াল TextField বা OutlinedTextField প্রয়োজন হয় তখন আমরা 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)
)
TextSnippets.kt

বিল্ডঅ্যানোটেটেড স্ট্রিং এবং স্প্যানস্টাইল ব্যবহার করে, লিনিয়ার গ্রেডিয়েন্টের সাথে, শুধুমাত্র একটি অংশ কাস্টমাইজ করতে।
চিত্র 3. 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)
    )
}
TextSnippets.kt

একটি পাসওয়ার্ড পাঠ্য এন্ট্রি ক্ষেত্র, পাঠ্যটি মুখোশযুক্ত

আরো উদাহরণ VisualTransformationSamples সোর্স কোডে পাওয়া যায়।

ইনপুট পরিষ্কার করুন

টেক্সট এডিট করার সময় একটি সাধারণ কাজ হল লিডিং অক্ষর বাদ দেওয়া, অথবা অন্যথায় ইনপুট স্ট্রিং প্রতিবার পরিবর্তন করার সময় রূপান্তর করা।

একটি মডেল হিসাবে, আপনার অনুমান করা উচিত যে কীবোর্ড প্রতিটি onValueChange নির্বিচারে এবং বড় সম্পাদনা করতে পারে। এটি ঘটতে পারে, উদাহরণস্বরূপ, যদি ব্যবহারকারী স্বয়ংক্রিয় সংশোধন ব্যবহার করে, একটি ইমোজি দিয়ে একটি শব্দ প্রতিস্থাপন করে বা অন্যান্য স্মার্ট এডিটিং বৈশিষ্ট্যগুলি ব্যবহার করে। এটি সঠিকভাবে পরিচালনা করার জন্য, onValueChange এ পাস করা বর্তমান পাঠ্যটি আগের বা পরবর্তী মানগুলির সাথে সম্পর্কিত নয় যা onValueChange এ পাস করা হবে এমন অনুমান সহ কোনও রূপান্তর যুক্তি লিখুন।

একটি টেক্সট ক্ষেত্র বাস্তবায়ন করতে যা অগ্রণী শূন্যগুলিকে অনুমোদন করে না, আপনি প্রতিটি মান পরিবর্তনের জন্য সমস্ত অগ্রণী শূন্য বাদ দিয়ে এটি করতে পারেন। 

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}
TextSnippets.kt

পাঠ্য পরিষ্কার করার সময় কার্সার অবস্থান নিয়ন্ত্রণ করতে, রাজ্যের অংশ হিসাবে TextFieldValue TextField ব্যবহার করুন।

রাষ্ট্রের সাথে সর্বোত্তম অনুশীলন

আপনার অ্যাপে ইনপুট সমস্যা রোধ করতে TextField অবস্থা সংজ্ঞায়িত এবং আপডেট করার জন্য নিম্নলিখিত সেরা অনুশীলনগুলির একটি সিরিজ রয়েছে৷

  • TextField অবস্থার প্রতিনিধিত্ব করতে MutableState ব্যবহার করুন : TextField স্টেটকে উপস্থাপন করতে StateFlow মতো প্রতিক্রিয়াশীল স্ট্রীম ব্যবহার করা এড়িয়ে চলুন, কারণ এই কাঠামোগুলি অ্যাসিঙ্ক্রোনাস বিলম্বের পরিচয় দিতে পারে। 

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

  • অবস্থা আপডেট করতে বিলম্ব এড়িয়ে চলুন : আপনি যখন 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) }
        /*...*/
    )
}
TextSnippets.kt

  • রাষ্ট্রটি কোথায় সংজ্ঞায়িত করতে হবে : আপনার TextField স্টেটে যদি আপনি টাইপ করার সাথে সাথে ব্যবসায়িক যুক্তি যাচাইকরণের প্রয়োজন হয়, তাহলে আপনার ViewModel এ রাজ্যটি উত্তোলন করা সঠিক। যদি এটি না হয়, আপনি সত্যের উত্স হিসাবে কম্পোজেবল বা একটি রাষ্ট্র ধারক শ্রেণী ব্যবহার করতে পারেন। আপনার রাজ্য কোথায় উত্তোলন করবেন সে সম্পর্কে আরও জানতে, রাজ্য উত্তোলন ডকুমেন্টেশন দেখুন।
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}