اشکال در Jetpack Compose Glimmer

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

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

شکل ۱. نمونه‌ای از شکل‌های بزرگ، متوسط ​​و کوچک در Jetpack Compose Glimmer.

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

کلاس 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) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}

سفارشی سازی اشکال

کلاس Shapes @Immutable است. می‌توانید یک کپی از شکل‌های موجود در تم ایجاد کنید و با استفاده از تابع copy، مقادیر خاص را بازنویسی کنید. این کار را برای حفظ ساختار تم در حین تنظیم شعاع‌های خاص برای برند برنامه خود انجام دهید.

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

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

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

مقادیر پیش‌فرض

اگر در GlimmerTheme طور دیگری مشخص نشده باشد، سیستم به طور پیش‌فرض مقادیر زیر را در نظر می‌گیرد:

توکن شکل پیش‌فرض اندازه یا شعاع

small

RoundedCornerShape

۲۴.dp

medium

RoundedCornerShape

۳۶.dp

large

CircleShape

کاملاً گرد