دراین مقاله قصد دارم به معرفی Drawing Modifier بپردازم که در ادامه مطالب قبلی از دسته های Modifier ها است

نقش Drawing Modifier ها در ظاهر بصری کامپوزابل‌ها

Modifierهای رسم ، کنترل می‌کنند که یک کامپوزابل چگونه به صورت بصری روی صفحه نمایش داده شود. این Modifierها ظاهر بصری را تعیین می‌کنند، مانند:

• رنگ پس‌زمینه (background color)
• حاشیه‌ها (borders)
• سایه‌ها (shadows)
• برش‌ها (clipping)
• . . .

افزودن رنگ پس‌زمینه با ()background

background() به یک کامپوزابل رنگ پس‌زمینه یا شکل پس‌زمینه اضافه می‌کند.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Cyan)  // رنگ پس‌زمینه آبی روشن
) {
    Text("مثال background")
}

🔊توضیح:

باعث می‌شود کامپوزابل با رنگ یا شکلی که مشخص شده پر شود و ظاهر آن تغییر کند.

• همیشه بهتر است Modifierهای مربوط به چیدمان مثل padding() را قبل از background() استفاده کنید تا رنگ پس‌زمینه به درستی روی فضای مورد نظر کشیده شود.

 🧠 نکته:

• background() می‌تواند یک رنگ ساده یا یک Brush (برای گرادینت و افکت‌های پیشرفته) دریافت کند.
• این Modifier معمولاً در انتهای زنجیره Modifierها قرار می‌گیرد تا پس‌زمینه به درستی رسم شود.

ایجاد حاشیه با ()border

Modifier border() یک حاشیه (مرز) دور کامپوزابل اضافه می‌کند.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .border(2.dp, Color.Black)  // حاشیه ۲dp به رنگ مشکی
        .background(Color.Yellow)
) {
    Text("مثال border")
}

🔊 توضیح:

• border(4.dp, Color.Black) یک حاشیه با ضخامت ۴dp و رنگ مشکی دور کامپوزابل اضافه می‌کند.
• این حاشیه می‌تواند به شکل‌های مختلف (دایره، مستطیل با گوشه‌های گرد و غیره) هم محدود شود (با استفاده از پارامتر شکل).
• بهتر است Modifierهای مربوط به چیدمان (مثل padding()) قبل از border() قرار بگیرند تا فاصله‌ها و موقعیت حاشیه درست باشد.

برش کامپوزابل با شکل دلخواه با ()clip

Modifier clip() کامپوزابل را به یک شکل مشخص برش (کلیپ) می‌دهد.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .clip(RoundedCornerShape(16.dp))  // برش با گوشه‌های گرد
        .background(Color.Cyan)
) {
    Text("مثال clip")
}

🔊توضیح:

• clip() کامپوزابل را داخل شکل مشخص شده محدود می‌کند، مثلاً CircleShape، و هر محتوایی که بیرون از این محدوده باشد را برش می‌زند.
• border() یک حاشیه با ضخامت و رنگ قابل تنظیم دور کامپوزابل اضافه می‌کند.
• padding() باعث می‌شود حاشیه مستقیماً روی محتوا قرار نگیرد و فاصله‌ای ایجاد شود تا ظاهر مرتب‌تر و زیباتر باشد.

تنظیم میزان شفافیت با ()alpha

Modifier alpha() میزان شفافیت کامپوزابل را تنظیم می‌کند.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .alpha(0.5f)  // 50% شفافیت
) {
    Text("مثال alpha")
}

🔊 توضیح:

• alpha(0.5f) باعث کاهش شفافیت کامپوزابل می‌شود و در نتیجه پس‌زمینه یا عناصر پشت آن به صورت نیمه‌شفاف دیده می‌شوند.
• بهتر است این Modifier بعد از تنظیمات مربوط به چیدمان و اندازه استفاده شود تا تاثیر بصری درست و دقیق باشد.

افزودن سایه و افکت عمق با ()shadow

Modifier shadow() به کامپوزابل یک افکت سایه اضافه می‌کند.

✅ مثال ساده:

Box(
    modifier = Modifier
        .size(100.dp)
        .shadow(elevation = 8.dp, shape = RoundedCornerShape(8.dp))
        .background(Color.White)
) {
    Text("مثال shadow")
}

🔊 توضیح:

• shadow(8.dp) با اضافه کردن افکت سایه عمق و برجستگی به کامپوزابل می‌بخشد و ظاهر آن را زیباتر و قابل توجه‌تر می‌کند.
• سایه‌ها باید بعد از تغییرات چیدمان اعمال شوند تا اندازه نهایی کامپوزابل را دقیق منعکس کنند.

جمع بندی نکته ها :

•  در انتهای زنجیره Modifier استفاده بشه، چون روی ظاهر نهایی اثر داره.

• اگر همراه با clip() استفاده می‌کنی، حتما شکل‌ها رو تنظیم کن (مثلاً RoundedCornerShape).

•  معمولاً قبل از background() و border() میاد تا به درستی شکل بگیره.

• مقدار بین 0f (کاملاً شفاف) تا 1f (کاملاً مات) هست.
• برای سایه درست، حتماً shape رو مشخص کن (مثل RoundedCornerShape).
• ترتیب پیشنهادی :

  Modifier
      .padding(...)         // اول چیدمان
      .shadow(...)          // بعد افکت عمق
      .clip(...)            // بعد بریدن ظاهر
      .background(...)      // بعد پس‌زمینه
      .border(...)          // بعد مرز
      .alpha(...)           // در نهایت شفافیت