Row در Jetpack Compose: چیست، ویژگی‌های composable و نحوه کار

Row در Jetpack Compose چیست

Row — یک تابع composable است که عناصر فرزند را در یک دنباله افقی قرار می‌دهد. در سلسله‌مراتب طرح‌بندی Compose، Row جایگاه کانتینر پایه را در کنار Column و Box دارد.

Row نیازی به تعیین اندازه ندارد — به طور خودکار با محتوا تنظیم می‌شود. عرض Row برابر با مجموع عرض عناصر فرزند با در نظر گرفتن فاصله‌ها است، مگر اینکه Modifier.fillMaxWidth یا اندازه ثابت تعیین شده باشد.

عناصر فرزند Row می‌توانند اصلاح‌کننده‌های خاص خود را داشته باشند که بر موقعیت آنها در داخل کانتینر تأثیر می‌گذارند. به عنوان مثال، Modifier.weight به عناصر اجازه می‌دهد بخش متناسبی از فضای موجود را اشغال کنند.

به گفته Android Developers Blog, 2024، Row عناصر فرزند را به ترتیب پردازش می‌کند و اندازه آنها را بر اساس قوانین اندازه‌گیری Compose محاسبه می‌کند: ابتدا عناصر بدون weight اندازه‌گیری می‌شوند، سپس فضای باقی‌مانده بین عناصر دارای weight توزیع می‌شود.

سینتکس و امضای پایه Row

امضای پایه Row شامل پارامتر modifier، horizontalArrangement و verticalAlignment است. تمام عناصر فرزند در آخرین بلوک لامبدا content منتقل می‌شوند.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "یک")
        Text(text = "دو")
        Text(text = "سه")
    }
}

ویژگی‌های Row: horizontalArrangement و verticalAlignment

پارامتر horizontalArrangement تعیین می‌کند که عناصر فرزند چگونه در امتداد محور افقی در داخل Row توزیع شوند. مقادیر Start، End، Center، SpaceBetween، SpaceAround و SpaceEvenly از کلاس Arrangement در دسترس هستند.

Arrangement.Start عناصر را در ابتدای کانتینر، Arrangement.End — در انتها، و Arrangement.Center — در مرکز قرار می‌دهد. این مقادیر مشابه ویژگی justify-content در CSS Flexbox عمل می‌کنند.

Arrangement.SpaceBetween عناصر را به طور مساوی توزیع می‌کند، اولین عنصر را در ابتدا، آخرین را در انتها و بقیه را با فاصله مساوی بین آنها قرار می‌دهد. به گفته Material Design Guidelines, 2025، SpaceBetween برای پنل‌های ابزار و ردیف‌های ناوبری بهینه است.

پارامتر verticalAlignment عناصر را به صورت عمودی مرتب می‌کند. مقادیر Alignment.Top، Alignment.CenterVertically و Alignment.Bottom در دسترس هستند. این ویژگی زمانی مفید است که عناصر Row ارتفاع متفاوتی دارند — مثلاً آیکون در کنار متن چندخطی.

جدول مقادیر Arrangement

توزیع فضا با Modifier.weight

Modifier.weight — یک اصلاح‌کننده است که فقط در داخل Row و Column در دسترس است و فضای موجود را بین عناصر فرزند به نسبت مقدار مشخص شده توزیع می‌کند. اگر یک عنصر وزن 1.0f و دیگری 2.0f داشته باشد، عنصر دوم دو برابر بیشتر فضا اشغال می‌کند.

عناصر بدون weight به اندازه‌ای که برای محتوای خود نیاز دارند فضا اشغال می‌کنند. فضای باقی‌مانده بین عناصر دارای weight به نسبت وزن آنها توزیع می‌شود. این رفتار مشابه ویژگی flex-grow در CSS Flexbox است.

به گفته Android Developer Documentation, 2025، weight فقط در داخل Row، Column و BoxWithConstraints کار می‌کند. هنگام استفاده از weight در Row، تمام عناصر فرزند در دو مرحله اندازه‌گیری می‌شوند: ابتدا عناصر بدون weight، سپس عناصر با weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "چپ",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "راست")
    }
}

نمونه کدهای Row

نمونه اول Row را با آیکون و متن نشان می‌دهد — یک سناریوی معمول برای لیست مخاطبین یا تنظیمات. Icon و Text در Row با verticalAlignment در مرکز قرار گرفته‌اند.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "افزودن به علاقه‌مندی‌ها")
    }
}

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

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("لغو") }
        Button(onClick = {}) { Text("ذخیره") }
    }
}

نمونه سوم — Row در داخل Card برای نمایش امتیاز. Row تودرتو با Modifier.weight به ستاره امتیاز و مقدار عددی اجازه می‌دهد فضای ثابتی را اشغال کنند.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "امتیاز:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

ویژگی‌های Row در طراحی تطبیقی

Row در طراحی تطبیقی نیاز به کنترل عرض دارد. اگر محتوای Row از عرض موجود صفحه بیشتر شود، عناصر ممکن است از مرزهای کانتینر خارج شوند. برای جلوگیری از این، از Modifier.horizontalScroll یا تغییر به Column استفاده کنید.

هنگام ترکیب Row با Modifier.weight، تنظیم fillMaxWidth برای Row والد مهم است — در غیر این صورت weight فضای غیرموجود را توزیع می‌کند. به گفته Material Design Guidelines, 2025، Row با weight بدون fillMaxWidth یک پیکربندی نادرست محسوب می‌شود.

برای رابط‌های تطبیقی، توصیه می‌شود Row را با Box ترکیب کنید یا از Arrangement.SpaceBetween برای توزیع خودکار عناصر در اندازه‌های مختلف صفحه استفاده کنید. این کار بدون درخواست‌های رسانه‌ای انعطاف‌پذیری را فراهم می‌کند.

• Modifier.horizontalScroll — در صورت سرریز Row پیمایش اضافه می‌کند
• Modifier.weight — فضا را به نسبت توزیع می‌کند
• Arrangement.SpaceBetween — توزیع تطبیقی با ثابت‌سازی در لبه‌ها