شکل‌ها در Jetpack Compose Glimmer

دستگاه‌های XR قابل‌اعمال

این راهنمایی به شما کمک می‌کند برای این نوع دستگاه‌های واقعیت گسترده تجربه بسازید.

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

در Jetpack Compose Glimmer، سطوح از شکل‌ها برای تعریف مرزهای دیداری و گردی خود استفاده می‌کنند. کلاس Shapes سطوح مختلفی از گردی را که برای انواع مختلف عناصر درنظر گرفته شده است ارائه می‌دهد.

دسته‌های شکل

کلاس GlimmerTheme سه اندازه استاندارد شکل را تعریف می‌کند:

• کوچک: شکلی با چهار گوشه هم‌اندازه. برای عناصری مثل کارت‌ها استفاده می‌شود. به‌طور پیش‌فرض، این RoundedCornerShape از ۲۴.dp است.
• متوسط: شکلی با چهار گوشه هم‌اندازه که اندازه آن بین کوچک و بزرگ است. این شکل رایج‌ترین شکل است و به‌طور پیش‌فرض در سطح استفاده می‌شود. به‌طور پیش‌فرض، این RoundedCornerShape ۳۶.dp است.
• بزرگ: شکلی با چهار گوشه کاملاً گرد. این شکل برای عناصری مثل دکمه‌ها استفاده می‌شود. به‌طور پیش‌فرض، این یک 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 مشخص نشده باشد، سیستم به‌طور پیش‌فرض از مقادیر زیر استفاده می‌کند: