سطوح در Jetpack Compose Glimmer

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

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

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

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

در Jetpack Compose Glimmer، جزء surface یک بلوک سازنده اساسی است که یک ناحیه بصری متمایز یا یک مرز فیزیکی برای اجزایی مانند دکمه‌ها و کارت‌ها را نشان می‌دهد.

یک سطح مسئول خواص بصری و فیزیکی زیر است:

• برش (Clipping ): فرزندانش را به شکل مشخصی برش می‌دهد.
• Border : یک حاشیه داخلی برای تأکید بر مرز جزء رسم می‌کند. وقتی فوکوس می‌شود، یک حاشیه پهن‌تر با هایلایت متمرکز رسم می‌کند.
• پس‌زمینه : یک رنگ پس‌زمینه را به ناحیه سطح اعمال می‌کند.
• افکت‌های عمق (Depth effects ): سایه‌های DepthEffect را بر اساس وضعیت کامپوننت (مانند پیش‌فرض در مقابل متمرکز) رندر می‌کند.
• رنگ محتوا : رنگی را برای متن و آیکون‌های داخل سطح ارائه می‌دهد که به طور پیش‌فرض از رنگ پس‌زمینه محاسبه می‌شود.
• حالت‌های تعامل : وقتی سطح فشرده می‌شود، یک لایه فشرده شده و وقتی فوکوس می‌شود، یک حاشیه پهن‌تر با هایلایت رسم می‌کند.

مثال: ایجاد یک سطح

کد زیر یک سطح با برش، پس‌زمینه و حاشیه‌های پیش‌فرض ایجاد می‌کند:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}
SurfaceSamples.kt

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}
SurfaceSamples.kt

Key points about the code

• Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}
SurfaceSamples.kt

نکات کلیدی در مورد کد

• منبع تعامل مشترک : هر دو .surface surface() و clickable() باید یک interactionSource مشترک داشته باشند. این تضمین می‌کند که حالت‌های بصری (مانند فشار دادن یا فوکوس کردن) همگام‌سازی می‌شوند و به سطح اجازه می‌دهند تا به صورت بصری به ورودی کاربر واکنش نشان دهد.

• ترتیب اصلاح‌کننده‌ها : توالی اصلاح‌کننده‌ها بسیار مهم است. از آنجا که .surface surface() یک طرح‌بندی را برش می‌دهد، قرار دادن آن قبل از .clickable clickable() تضمین می‌کند که هدف لمسی به شکل سطح محدود می‌شود. اگر clickable() اول بیاید، ناحیه تعامل ممکن است فراتر از مرزهای قابل مشاهده و برش داده شده کامپوننت گسترش یابد.

اثر عمق سطحی

کلاس SurfaceDepthEffect انتقال سایه‌ها بین حالت‌های تعامل را مدیریت می‌کند:

• depthEffect : جلوه سایه‌ای که وقتی سطح در حالت پیش‌فرض خود است، استفاده می‌شود.
• focusedDepthEffect : اثر سایه‌ای که هنگام فوکوس کردن سطح استفاده می‌شود.