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

ویدیو آموزش فارسی مقدماتی FlowRow/FlowColumn در یوتیوب

FlowRow/FlowColumn چیست؟

یک کامپوننت چیدمان انعطاف‌پذیر در کامپوز که آیتم‌ها به صورت افقی/عمودی چیده شده و به صورت اتوماتیک به خط بعدی منتقل می‌شوند.

تفاوت FlowRow با Row

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

موارد استفاده رایج از FlowRow

هر جا که نیاز به چیدمان آیتم‌ها به صورت خودکار و بدون نیاز به اسکرول افقی باشد.

نمایش تگ‌ها یا برچسب‌ها (مانند برچسب‌های موضوعی در یک پست وبلاگ)

فیلترها و گزینه‌های جستجو

دکمه‌های عملیاتی با اندازه‌های متفاوت

نمونه کد پایه

در ادامه یک نمونه ساده از استفاده از FlowRow برای نمایش اموجی ها را مشاهده می‌کنید:

@Composable
fun FlowRowTest() {
    FlowRow(
        modifier = Modifier.fillMaxSize(),
    ) {
        for (i in 1..20) {
            Item(i)
        }
    }
}

پارامترها و سفارشی‌سازی FlowRow

FlowRow پارامترهای مختلفی برای سفارشی‌سازی چیدمان ارائه می‌دهد. در این بخش به مهم‌ترین آن‌ها می‌پردازیم.

horizontalArrangement

این پارامتر نحوه توزیع فضای خالی بین آیتم‌ها در محور افقی را کنترل می‌کند. گزینه‌های موجود عبارتند از:

Arrangement.Start (پیش‌فرض): آیتم‌ها از سمت چپ (در صورت RTL بودن از سمت راست) شروع می‌شوند.
Arrangement.Center: آیتم‌ها در مرکز قرار می‌گیرند.
Arrangement.End: آیتم‌ها از سمت راست (در صورت RTL بودن از سمت چپ) شروع می‌شوند.
Arrangement.SpaceBetween: فضای خالی به صورت مساوی بین آیتم‌ها توزیع می‌شود.
Arrangement.SpaceAround: فضای خالی به صورت مساوی دور آیتم‌ها توزیع می‌شود.
Arrangement.SpaceEvenly: فضای خالی به صورت مساوی بین و دور آیتم‌ها توزیع می‌شود.
Arrangement.spacedBy(8.dp): فاصله مشخص بین آیتم‌ها ایجاد می‌کند.

FlowRow(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally),
        verticalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterVertically)

    ) {
        for (i in 1..20) {
            Item(i, modifier = Modifier.widthIn(max = 30.dp).weight(1f).height(60.dp))
        }
    }

verticalAlignment

این پارامتر نحوه ترازبندی آیتم‌ها در محور عمودی را کنترل می‌کند و گزینه‌های زیر را دارد:

Alignment.Top (پیش‌فرض): آیتم‌ها در بالای خط تراز می‌شوند.
Alignment.CenterVertically: آیتم‌ها در مرکز خط تراز می‌شوند.
Alignment.Bottom: آیتم‌ها در پایین خط تراز می‌شوند.
موارد دیگر شبیه horizontal هست.

maxItemsInEachRow

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

FlowRow(
    modifier = Modifier.padding(16.dp),
    maxItemsInEachRow = 3
) {
    // آیتم‌ها
}

استفاده از وزن‌ها در FlowRow

در FlowRow، وزن‌ها شبیه Row عمل می کند، منتها بر اساس آیتم‌های موجود در همان خط محاسبه می‌شوند، نه تمام آیتم‌های موجود در FlowRow. مثال خیلی کاربردی : دکمه های ماشین حساب:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 4
) {
    buttons.forEach { button ->
        FlowButton(
            modifier = Modifier
                .aspectRatio(1 * button.weight)
                .clip(CircleShape)
                .background(button.color)
                .weight(button.weight),
            text = button.text,
            textColor = button.textColor,
        )
    }
}

نکته مهم:

FlowRow برای تعداد کم تا متوسط آیتم‌ها مناسب است. برای لیست‌های بسیار طولانی، استفاده از LazyRow یا LazyColumn بهتر است.

منابع برای یادگیری بیشتر

نتیجه‌گیری

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

کار با FlowRow/FlowColumn در Compose (اندروید، کاتلین مولتی پلتفرم)