রচনা লেআউটে অন্তর্নিহিত পরিমাপ

কম্পোজের নিয়মগুলির মধ্যে একটি হল যে আপনি শুধুমাত্র একবার আপনার বাচ্চাদের পরিমাপ করবেন; শিশুদের দুবার পরিমাপ করা একটি রানটাইম ব্যতিক্রম নিক্ষেপ করে। যাইহোক, এমন কিছু সময় আছে যখন আপনার বাচ্চাদের পরিমাপ করার আগে তাদের সম্পর্কে কিছু তথ্য প্রয়োজন।

Intrinsics আপনাকে বাচ্চাদের প্রকৃতপক্ষে পরিমাপ করার আগে জিজ্ঞাসা করতে দেয়।

একটি কম্পোজেবলের জন্য, আপনি এর intrinsicWidth বা intrinsicHeight জানতে চাইতে পারেন:

  • (min|max)IntrinsicWidth
  • (min|max)IntrinsicHeight

উদাহরণস্বরূপ, আপনি যদি অসীম height সহ একটি Text minIntrinsicHeight জিজ্ঞাসা করেন, তাহলে এটি Text height ফিরিয়ে দেবে যেন পাঠ্যটি একটি লাইনে আঁকা হয়েছে।

কর্মের মধ্যে অন্তর্নিহিত

কল্পনা করুন যে আমরা একটি কম্পোজেবল তৈরি করতে চাই যা স্ক্রিনে দুটি পাঠ্য প্রদর্শন করে এই মত একটি বিভাজক দ্বারা পৃথক করা হয়:

দুটি পাঠ্য উপাদান পাশাপাশি, তাদের মধ্যে একটি উল্লম্ব বিভাজক সহ

এটা আমরা কিভাবে করতে পারি? আমাদের ভিতরে দুটি Text সহ একটি Row থাকতে পারে যেটি যতটা সম্ভব প্রসারিত হয় এবং মাঝখানে একটি Divider । আমরা চাই Divider সবচেয়ে লম্বা Text মতো লম্বা এবং পাতলা হোক ( width = 1.dp )।

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        Divider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}
IntrinsicSnippets.kt

যদি আমরা এটির পূর্বরূপ দেখি, আমরা দেখতে পাই যে Divider পুরো পর্দায় প্রসারিত হয় এবং আমরা যা চাই তা নয়:

দুটি পাঠ্য উপাদান পাশাপাশি, তাদের মধ্যে একটি বিভাজক রয়েছে, তবে বিভাজকটি পাঠ্যের নীচে নীচে প্রসারিত হয়

এটি ঘটে কারণ Row প্রতিটি শিশুকে পৃথকভাবে পরিমাপ করে এবং Text উচ্চতা Divider সীমাবদ্ধ করতে ব্যবহার করা যাবে না। আমরা চাই Divider একটি প্রদত্ত উচ্চতা দিয়ে উপলব্ধ স্থান পূরণ করুক। এর জন্য, আমরা height(IntrinsicSize.Min) মডিফায়ার ব্যবহার করতে পারি।

height(IntrinsicSize.Min) মাপ তার বাচ্চাদের তাদের ন্যূনতম অন্তর্নিহিত উচ্চতার মতো লম্বা হতে বাধ্য করা হচ্ছে। যেহেতু এটি পুনরাবৃত্ত, এটি Row এবং এর বাচ্চাদের minIntrinsicHeight জিজ্ঞাসা করবে।

আমাদের কোডে এটি প্রয়োগ করা, এটি প্রত্যাশিত হিসাবে কাজ করবে:

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        Divider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}

// @Preview
@Composable
fun TwoTextsPreview() {
    MaterialTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}
IntrinsicSnippets.kt

পূর্বরূপ সহ:

দুটি পাঠ্য উপাদান পাশাপাশি, তাদের মধ্যে একটি উল্লম্ব বিভাজক সহ

Row কম্পোজেবল এর minIntrinsicHeight হবে তার বাচ্চাদের সর্বোচ্চ minIntrinsicHeight । Divider উপাদানটির minIntrinsicHeight হল 0 কারণ এটি স্থান দখল করে না যদি কোন সীমাবদ্ধতা না দেওয়া হয়; Text minIntrinsicHeight হবে একটি নির্দিষ্ট width দেওয়া টেক্সটের। অতএব, Row উপাদানের height সীমাবদ্ধতা হবে Text সর্বোচ্চ minIntrinsicHeight । Divider তারপর Row দ্বারা প্রদত্ত height সীমাবদ্ধতার height প্রসারিত করবে।

আপনার কাস্টম লেআউটে অন্তর্নিহিত

একটি কাস্টম Layout বা layout সংশোধক তৈরি করার সময়, আনুমানিকতার উপর ভিত্তি করে অভ্যন্তরীণ পরিমাপ স্বয়ংক্রিয়ভাবে গণনা করা হয়। অতএব, সমস্ত লেআউটের জন্য গণনা সঠিক নাও হতে পারে। এই APIগুলি এই ডিফল্টগুলিকে ওভাররাইড করার বিকল্পগুলি অফার করে৷

আপনার কাস্টম Layout অন্তর্নিহিত পরিমাপ নির্দিষ্ট করতে, এটি তৈরি করার সময় MeasurePolicy ইন্টারফেসের minIntrinsicWidth , minIntrinsicHeight , maxIntrinsicWidth , এবং maxIntrinsicHeight ওভাররাইড করুন৷

@Composable
fun MyCustomComposable(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
            override fun MeasureScope.measure(
                measurables: List<Measurable>,
                constraints: Constraints
            ): MeasureResult {
                // Measure and layout here
                // ...
            }

            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                // Logic here
                // ...
            }

            // Other intrinsics related methods have a default value,
            // you can override only the methods that you need.
        }
    )
}
IntrinsicSnippets.kt

আপনার কাস্টম layout মডিফায়ার তৈরি করার সময়, LayoutModifier ইন্টারফেসে সম্পর্কিত পদ্ধতিগুলিকে ওভাররাইড করুন।

fun Modifier.myCustomModifier(/* ... */) = this then object : LayoutModifier {

    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        // Measure and layout here
        // ...
    }

    override fun IntrinsicMeasureScope.minIntrinsicWidth(
        measurable: IntrinsicMeasurable,
        height: Int
    ): Int {
        // Logic here
        // ...
    }

    // Other intrinsics related methods have a default value,
    // you can override only the methods that you need.
}
IntrinsicSnippets.kt

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}
পূর্ববর্তী
প্রান্তিককরণ লাইন
পরবর্তী
সীমাবদ্ধতা লেআউট