Jetpack Compose Glimmer-এ শেপ

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, সারফেস তাদের ভিজ্যুয়াল সীমা ও রাউন্ডনেস নির্ধারণ করতে শেপ ব্যবহার করে। Shapes ক্লাসে বিভিন্ন ধরনের কম্পোনেন্টের জন্য রাউন্ডেডনেসের বিভিন্ন লেভেল প্রদান করা হয়।

শেপের বিভাগ

GlimmerTheme ক্লাস তিনটি স্ট্যান্ডার্ড শেপ সাইজ নির্ধারণ করে:

• ছোট: চারটি সমান আকারের কোণযুক্ত একটি শেপ। এটি কার্ডের মতো কম্পোনেন্টের জন্য ব্যবহার করা হয়। ডিফল্ট হিসেবে, এটি RoundedCornerShape ২৪.dp হয়।
• মাঝারি: ছোট ও বড় সাইজের মধ্যে থাকা চারটি একই সাইজের কোণ সহ একটি শেপ। এটি সবচেয়ে বেশি ব্যবহার করা হয় এমন শেপ এবং এটি সারফেসে ডিফল্ট হিসেবে ব্যবহার করা হয়। ডিফল্ট হিসেবে, এটি ৩৬.dp-এর RoundedCornerShape হয়।
• বড়: চারটি সম্পূর্ণ গোলাকার কোণ সহ একটি শেপ। এই শেপটি বোতামের মতো কম্পোনেন্টের জন্য ব্যবহার করা হয়। ডিফল্ট হিসেবে, এটি একটি CircleShape।

উদাহরণ: GlimmerTheme থেকে শেপ নিয়ে কম্পোনেন্টে প্রয়োগ করা

প্রথমে, GlimmerTheme.shapes থেকে আগে থেকে নির্দিষ্ট করা আকারগুলি পান এবং তারপরে সেইসব আকার কিছু কম্পোনেন্টে প্রয়োগ করুন:

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

আকার কাস্টমাইজ করা

Shapes ক্লাসটি @Immutable। আপনি আগে থেকে থাকা থিমের শেপের কপি তৈরি করতে এবং কপি ফাংশন ব্যবহার করে নির্দিষ্ট ভ্যালু ওভাররাইড করতে পারবেন। আপনার অ্যাপের ব্র্যান্ডের জন্য নির্দিষ্ট ব্যাসার্ধ অ্যাডজাস্ট করার সময় থিমের স্ট্রাকচার ঠিক রাখতে এটি করুন।

উদাহরণ: নির্দিষ্ট শেপের ভ্যালু ওভাররাইড করা

নিচের কোডটি নির্দিষ্ট শেপের ভ্যালুকে ওভাররাইড করে:

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}
ShapesSamples.kt

ডিফল্ট মান

GlimmerTheme-এ অন্যভাবে উল্লেখ করা না থাকলে, সিস্টেম ডিফল্ট হিসেবে নিম্নলিখিত ভ্যালু ব্যবহার করে: