در 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")
}
}
تعامل و تمرکز
سطوح به طور پیشفرض قابل فوکوس نیستند، بنابراین کاربران نمیتوانند با آنها تعامل داشته باشند. در بیشتر موارد، سطوح باید تعاملی باشند تا به کاربران اجازه دهند به طور مداوم فوکوس را جابجا کنند و بین اجزا حرکت کنند. میتوانید از اصلاحکنندهی focusable Compose برای سطوحی که فقط برای فوکوس در نظر گرفته شدهاند استفاده کنید. به طور مشابه، میتوانید با استفاده از اصلاحکنندهی clickable Compose، یک سطح قابل کلیک ایجاد کنید. همچنین میتوانید از اصلاحکنندههای دیگر برای سطوحی که نیاز به اقدامات دارند استفاده کنید.
کد زیر نمونههایی از سطوح قابل فوکوس و قابل کلیک را نشان میدهد:
@Composable fun FocusableSurfaceSample() { val interactionSource = remember { MutableInteractionSource() } Box( modifier = Modifier .size(100.dp) .surface(interactionSource = interactionSource) .focusable(interactionSource = interactionSource), contentAlignment = Alignment.Center ) { Text("Focusable") } } @Composable fun ClickableSurfaceSample() { val interactionSource = remember { MutableInteractionSource() } Box( modifier = Modifier .size(100.dp) .surface(interactionSource = interactionSource) .focusable(interactionSource = interactionSource) .clickable( interactionSource = interactionSource, indication = null ) { /* Handle click action */ }, contentAlignment = Alignment.Center ) { Text("Clickable") } }
نکات کلیدی در مورد کد
منبع تعامل مشترک برای سطوح قابل فوکوس : هر دو
.surface()و.focusable()باید یکinteractionSourceمشترک داشته باشند. این به سطح اجازه میدهد تا به تغییرات فوکوس واکنش نشان دهد.منبع تعامل مشترک برای سطوح قابل کلیک : هر دو
.surface()و.clickable()باید یکinteractionSourceمشترک داشته باشند. این تضمین میکند که حالتهای بصری (مانند فشار دادن یا فوکوس کردن) همگامسازی میشوند و به سطح اجازه میدهند تا به صورت بصری به ورودی کاربر واکنش نشان دهد.ترتیب اصلاحکنندهها : توالی اصلاحکنندهها بسیار مهم است. از آنجا که
.surface()یک طرحبندی را برش میدهد، قرار دادن آن قبل از.clickable()تضمین میکند که هدف لمسی به شکل سطح محدود میشود. اگر.clickable()اول بیاید، ناحیه تعامل ممکن است فراتر از مرزهای قابل مشاهده و برش داده شده کامپوننت گسترش یابد.
اثر عمق سطحی
کلاس SurfaceDepthEffect انتقال سایهها بین حالتهای تعامل را مدیریت میکند:
-
depthEffect: جلوه سایهای که وقتی سطح در حالت پیشفرض خود است، استفاده میشود. -
focusedDepthEffect: اثر سایهای که هنگام فوکوس کردن سطح استفاده میشود.