کامپوننت Surface در Jetpack Compose یک ابزار بنیادین و بسیار کارآمد برای تعریف ظاهر بصری و ساختاردهی محتوا است. این کامپوننت فراتر از یک لایه ساده عمل می‌کند و ویژگی‌های مهمی نظیر عمق سه‌بعدی، رنگ‌آمیزی، و شکل ظاهری را به اجزای درون خود تزریق می‌کند.

Jetpack Compose یک چارچوب مدرن برای توسعه رابط کاربری در برنامه‌های اندروید است که به عنوان پاسخگو به نیازهای روزافزون توسعه‌دهندگان طراحی شده است. این چارچوب به وسیله‌ی رویکردی مبتنی بر کامپوننت‌های اعلانی (Declarative) به برنامه‌نویسان اجازه می‌دهد تا به راحتی و به صورت منعطف، رابط‌های کاربری زیبا و کاربرپسند بسازند.

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

این کامپوننت به توسعه‌دهندگان این امکان را می‌دهد که ویژگی‌های بصری چون رنگ پس‌زمینه، سایه، و شکل ظاهری را به المان‌های خود اعمال کنند. در این مقاله، به بررسی اجزای مختلف و کارکردهای Surface خواهیم پرداخت و نحوه بهره‌برداری از آن را در طراحی رابط‌های کاربری بررسی می‌کنیم.

۱. ایجاد یک Surface پایه

برای تعریف این کامپوننت ، باید آن را با استفاده از کامپوننت Surface() فراخوانی کنید و حداقل محتوای داخلی (content) آن را مشخص نمایید.

مثال کد پایه:

Surface(
    modifier = Modifier
        .height(150.dp)
        .width(250.dp)
        .padding(1.dp), /* حاشیه برای کل سطح */
    color = Color(0xFFA1E2EB), /* رنگ پس‌زمینه فیروزه‌ای روشن */
    elevation = 40.dp, /* سایه قوی */
    shape = RoundedCornerShape(20.dp) /* گوشه‌های گرد */
) {
    Text(
        text = "Basic Surface",
        modifier = Modifier.padding(16.dp) /* حاشیه داخلی برای متن */
    )
}

در این مثال، ما از Modifier برای کنترل ابعاد و حاشیه‌بندی، color برای رنگ پس‌زمینه، elevation برای ایجاد اثر سایه، و shape برای گرد کردن گوشه‌ها استفاده کردیم.

مطالعه بیشتر : آموزش Modifier در کامپوز 

۲. پارامترهای کلیدی 

 این کامپوننت با پارامترهای متعددی برای سفارشی‌سازی کامل عرضه می‌شود. درک این پارامترها برای طراحی دقیق رابط کاربری ضروری است:

۲.۱. عمق (Elevation) و اثر سایه

پارامتر elevation مسئول ایجاد توهم عمق سه‌بعدی است. در طراحی متریال (Material Design)، سطوحی که elevation بالاتری دارند، از دید کاربر بالاتر به نظر می‌رسند و سایه بزرگ‌تر و تیره‌تری زیر آن‌ها می‌افتد. این ویژگی برای مشخص کردن سلسله مراتب بصری عناصر بسیار مهم است.

نکته: زمانی که elevation یک مقدار بزرگ (مثلاً 40.dp) را می‌گیرد، سایه ایجاد شده نیز قوی‌تر خواهد بود و باعث می‌شود عنصر از زمینه‌ی زیرین خود کاملاً متمایز شود.

۲.۲. رنگ پس‌زمینه (color) و حاشیه‌بندی

رنگ پس‌زمینه توسط پارامتر color تنظیم می‌شود. نکته مهم: اگر بخواهید از Modifier برای تعیین رنگ استفاده کنید (مانند Modifier.background(…))، این تغییر رنگ بر پارامتر color اولویت دارد و رنگ نهایی Surface را تعیین می‌کند.

مثال تضاد رنگ:

در این مثال، با وجود اینکه color در Surface تنظیم شده است، Modifier.background(Color.Blue) بر آن غلبه کرده و پس‌زمینه آبی می‌شود:

Surface(
    modifier = Modifier
        .height(150.dp)
        .width(250.dp)
        .padding(25.dp)
        .background(Color.Blue), /* این رنگ بر color اصلی ارجحیت دارد */
    color = Color(0xFF79EBE0), /* این رنگ نادیده گرفته می‌شود مگر اینکه Modifier.background نباشد */
    shape = CircleShape /* شکل دایره‌ای */
) {
    Text(text = "BackGround Color", Modifier.padding(16.dp))
}

۲.۳. اعمال حاشیه (border)

می‌توانید با استفاده از پارامتر border، یک خط مرزی مشخص به دور Surface اضافه کنید. این حاشیه با ضخامت مشخصی (مثلاً 5.dp) و رنگ دلخواه، روی شکل کلی اعمال می‌شود و معمولاً پس از اعمال shape رسم می‌گردد.

Surface(
    modifier = Modifier
        .height(150.dp)
        .width(250.dp)
        .padding(25.dp)
        .border(5.dp, Color.Red), /* حاشیه 5 پیکسلی قرمز */
    color = Color(0xFF78AEDA),
    shape = RectangleShape /* مستطیل کامل */
) {
    // محتوا
}

جمع‌بندی: چرا Surface مهم است؟

Surface به توسعه‌دهندگان اجازه می‌دهد تا مفاهیم طراحی سطح (مانند سایه‌ها و سلسله مراتب) را به راحتی در کدهای اعلانی (Declarative) پیاده‌سازی کنند. این کامپوننت نه تنها زیبایی بصری را فراهم می‌کند، بلکه با پارامترهایی مانند onClick و enabled، قابلیت تعامل‌پذیری و وضعیت‌دهی (State Handling) را نیز برای اجزای پیچیده‌تر مانند کارت‌ها (Cards) و دکمه‌ها ممکن می‌سازد.