معرفی 

یکی از مهم‌ترین دسته‌های Modifierها، دسته‌ی Modifier Layout ها هستن. این Modifierها مستقیماً با موقعیت، اندازه، فاصله‌گذاری و تراز عناصر روی صفحه سر و کار دارن.

فرض کن تو در حال طراحی یه اپ هستی و می‌خوای متن، تصویر یا دکمه‌هات در مکان خاصی قرار بگیرن، اندازه مشخصی داشته باشن یا از بقیه فاصله بگیرن. اینجاست که Modifierها به کمکت میان.

کنترل موقعیت و اندازه المان‌ها با Modifierها

padding(): فاصله داخلی

برای ایجاد فاصله بین محتوای یک عنصر و لبه‌های خودش استفاده می‌شه. مثل حاشیه داخلی یک دکمه.

Text(
    text = "سلام دنیا",
    modifier = Modifier.padding(16.dp)
)

📝 می‌تونی به‌صورت جداگانه برای هر جهت padding تعیین کنی، مثل padding(horizontal = 8.dp) یا padding(start = 8.dp, top = 4.dp).

fillMaxSize(): اشغال کل فضا

این Modifier باعث می‌شه یک عنصر تمام فضای در دسترس والدش رو بگیره. معادل match_parent در Viewهای قدیمی اندروید هست.

Box(
    modifier = Modifier.fillMaxSize().background(Color.Green)
) {
    Text("متن در مرکز", Modifier.align(Alignment.Center), color = Color.White)
}

همچنین fillMaxWidth() یا fillMaxHeight() برای اشغال فقط عرض یا ارتفاع کاربرد دارن.

wrapContentSize(): به‌اندازه محتوا

کامپوزابل فقط به اندازه‌ی محتوای خودش فضا می‌گیره، حتی اگر والدش فضای بیشتری در اختیارش بذاره.

Box(
    modifier = Modifier
        .wrapContentSize(align = Alignment.BottomEnd)
        .size(150.dp)
        .background(Color.Gray)
) {
    Box(modifier = Modifier.size(50.dp).background(Color.Blue))
}

📌 گزینه‌ی خوبی برای زمانی هست که نمی‌خوای یک عنصر فضای اضافی مصرف کنه.

size(): تعیین اندازه‌ی مشخص

برای تعیین عرض و ارتفاع مشخص کامپوزابل استفاده می‌شه.

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
)

✅ اگه بخوای عرض و ارتفاع رو جداگانه مشخص کنی، می‌تونی از width() و height() استفاده کنی.

🔍 ترتیب قرار گرفتن size() نسبت به padding() یا offset() می‌تونه ظاهر نهایی رو تغییر بده.

offset(): جابه‌جایی بصری

این Modifier باعث جابه‌جایی ظاهری عنصر از مکان اصلیش می‌شه، بدون اینکه به بقیه‌ی عناصر کاری داشته باشه.

Box(Modifier.size(100.dp).background(Color.LightGray)) {
    Box(
        Modifier
            .offset(x = 20.dp, y = 10.dp)
            .size(40.dp)
            .background(Color.Blue)
    )
}

🔧 ابزار خیلی خوبی برای ایجاد افکت‌های گرافیکی یا جابه‌جایی جزئی عناصره.

align(): تراز در داخل والد

موقعیت قرارگیری عنصر نسبت به فضای داخلی والد رو تعیین می‌کنه (مخصوصاً در Box).

Box(Modifier.size(200.dp)) {

    Text("گوشه پایین راست", Modifier.align(Alignment.BottomEnd))

}

📌 برای Row یا Column از Arrangement استفاده می‌شه ولی برای Box از align().

weight(): تقسیم فضا

برای تقسیم مساوی یا نسبی فضای در دسترس بین عناصر در Row یا Column استفاده می‌شه.

Row(Modifier.fillMaxWidth()) {

    Box(Modifier.weight(1f).height(50.dp).background(Color.Red))

    Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))

}

🔢 نسبت‌ها جمع می‌شن و به همون نسبت فضا تقسیم می‌شه (اینجا 1:2).

مدیریت فاصله‌ها: padding، margin و Spacer

در Compose برخلاف سیستم View، مفهوم مستقلی به‌اسم margin نداریم، اما می‌تونیم فاصله‌ی بین عناصر رو با چند روش ساده مدیریت کنیم:

روش 1:استفاده از  Modifier Layout :  padding دوبل

با استفاده از چند padding() می‌تونی هم فاصله بیرونی (مشابه margin) و هم داخلی رو کنترل کنی.

• اولین padding() به‌عنوان فاصله بین این کامپوزابل و عناصر دیگر عمل می‌کند.
• دومین padding() فاصله‌ی بین محتوای درون کامپوزابل و لبه‌های آن را مشخص می‌کند.

Box(

    modifier = Modifier

        .padding(16.dp)  // فاصله بیرونی

        .padding(8.dp)   // فاصله داخلی

        .background(Color.Gray)

) {

    Text("متنی داخل باکس")

}

روش 2: استفاده از Spacer

برای ایجاد فضای خالی بین عناصر، Spacer یکی از ابزارهای ساده و کاربردی Compose هست:

Column {

    Text("آیتم اول")

    Spacer(Modifier.height(8.dp)) // فاصله بین دو آیتم

    Text("آیتم دوم")

}

روش 3: offset همراه با padding

می‌تونی با ترکیب offset() و padding() کنترل کامل‌تری روی موقعیت و فاصله‌ی عناصر داشته باشی.

برای کنترل بهتر فاصله‌ها، می‌توانید از offset() برای ایجاد فاصله خارجی و از padding() برای تنظیم فاصله داخلی (بین محتوا و لبه‌های کامپوزابل) استفاده کنید.

Box(
    modifier = Modifier
        .offset(x = 16.dp, y = 16.dp)  // جابه‌جایی به سمت راست و پایین
        .padding(8.dp)                 // فاصله داخلی محتوا
        .background(Color.LightGray)
) {
    Text("متنی با offset و padding")
}

درک دقیق Layout Modifierها بهت کمک می‌کنه رابط‌های کاربری دقیق، منظم و زیبا بسازی. این ابزارها پایه‌ی هر طراحی در Compose هستن. در ادامه، با جمع بندی نکات ، استفاده از مدیفایر های چیدمان ، این مقاله رو به آخر میرسونیم .