اشکال در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

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

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

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

دسته بندی شکل ها

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

• کوچک : شکلی با چهار گوشه هم‌اندازه. برای اجزایی مانند کارت‌ها استفاده می‌شود. به‌طور پیش‌فرض، این یک RoundedCornerShape با اندازه 24.dp است.
• Medium : شکلی با چهار گوشه هم‌اندازه که اندازه آنها بین کوچک و بزرگ است. این رایج‌ترین شکل مورد استفاده است و به طور پیش‌فرض در surface استفاده می‌شود. به طور پیش‌فرض، این یک 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 است. می‌توانید یک کپی از شکل‌های موجود در تم ایجاد کنید و با استفاده از تابع copy، مقادیر خاص را بازنویسی کنید. این کار را برای حفظ ساختار تم در حین تنظیم شعاع‌های خاص برای برند برنامه خود انجام دهید.

مثال: مقادیر شکل خاص را نادیده بگیرید

کد زیر مقادیر شکل خاص را لغو می‌کند:

@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 طور دیگری مشخص نشده باشد، سیستم به طور پیش‌فرض مقادیر زیر را در نظر می‌گیرد: