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

سلام دوست عزیز! اگر تازه با Jetpack Compose آشنا شدی، باید بگم که این ابزار قراره کارتو برای طراحی رابط کاربری خیلی راحت‌تر کنه.
اگه قبلاً با RecyclerView و آداپترها کار کرده باشی، می‌دونی که ساخت لیست‌ ها توی سیستم قدیمی XML کمی پیچیده بود. اما توی Compose، همه‌چیز خیلی ساده‌تر و شفاف‌تر شده. بیا قدم‌به‌قدم با list ها توی Compose آشنا بشیم.

چرا لیست‌ ها در Compose راحت‌ترند؟

در سیستم قدیمی (XML)، برای ساخت لیست باید چند تا کار انجام می‌دادی:

• یه فایل طراحی جدا برای هر آیتم لیست می‌ساختی.
• یه کلاس ViewHolder تعریف می‌کردی.
• داده‌ها رو دستی با Adapter به لیست وصل می‌کردی.

اما توی Compose این دردسرها حذف شده و می‌تونی مستقیماً آیتم‌های list رو داخل composable تعریف کنی. علاوه بر این، امکاناتی مثل انیمیشن، مدیریت حالت و قابلیت استفاده مجدد هم از همون اول توی Compose برات آماده‌ست.

انواع list ها در Compose

توی Compose می‌تونی انواع مختلف لیست‌ها رو بسازی:

1. عمودی (Vertical List)
2. افقی (Horizontal List)
3. گرید (Grid List)
4. سفارشی (Custom List)

حالا هرکدوم رو با جزئیات بررسی می‌کنیم.

۱. لیست عمودی (LazyColumn)

یکی از رایج‌ترین انواع list هاست. برای این کار از کامپوننت LazyColumn استفاده می‌کنیم. یه مثال ساده ببینیم:

   

@Composable
fun VerticalList() {
    val items = (1..20).toList()
    LazyColumn {
        items(items) { item ->
            Text(
                text = "Item $item",
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth(),
                style = MaterialTheme.typography.body1
            )
        }
    }
}

توضیحات:

• LazyColumn یه list با اسکرول عمودی می‌سازه.
• تابع items از روی list داده‌ها (items) عبور می‌کنه و برای هر آیتم یه Composable ایجاد می‌کنه.
• با Modifier می‌تونی استایل مثل پدینگ و عرض آیتم‌ها رو تنظیم کنی.

نکته: اگه بخوای list  رو افقی نشون بدی، فقط کافیه LazyColumn رو با LazyRow عوض کنی.

۲. list گرید (LazyVerticalGrid)

برای ساخت لیستی که آیتم‌هاش به شکل گرید نمایش داده بشن، از LazyVerticalGrid استفاده می‌کنیم. این یه نمونه ساده است:

@Composable
fun GridList() {
    val items = (1..20).toList()
    LazyVerticalGrid(
        columns = GridCells.Fixed(2), // تعداد ستون‌ها
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxWidth(),
                elevation = 4.dp
            ) {
                Text(
                    text = "Item $item",
                    modifier = Modifier.padding(16.dp),
                    style = MaterialTheme.typography.h6
                )
            }
        }
    }
}

توضیحات:

• LazyVerticalGrid یه ساختار گریدی درست می‌کنه.
• پارامتر GridCells.Fixed تعداد ستون‌ها رو مشخص می‌کنه (اینجا ۲ تا ستون داریم).
• از Card و Modifier برای استایل دادن به آیتم‌ها استفاده شده.

۳. list سفارشی

گاهی نیاز داری لیستی با استایل خاص خودت بسازی. اینجا می‌تونی از LazyColumn یا LazyRow استفاده کنی و منطق خودتو بهش اضافه کنی. به مثال زیر دقت کن:

@Composable
fun CustomList() {
    val items = listOf("User-1", "User-2", "User-3", "User-4", "User-5")
    LazyColumn {
        itemsIndexed(items) { index, item ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
                    .background(if (index % 2 == 0) Color.LightGray else Color.White),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "$index",
                    modifier = Modifier.padding(16.dp),
                    style = MaterialTheme.typography.body1
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = item,
                    style = MaterialTheme.typography.h6
                )
            }
        }
    }
}

توضیحات:

• itemsIndexed هم ایندکس و هم آیتم رو بهت می‌ده، که باهاش می‌تونی استایل ردیف‌های زوج و فرد رو متفاوت کنی.
• از Row برای تراز کردن عناصر به صورت افقی استفاده شده.
• برای زیبایی، از رنگ‌های متناوب (مثلاً خاکستری برای ردیف‌های زوج) و فاصله‌گذاری استفاده شده.

۴. ترکیب list ها

گاهی می‌خوای یه لیست عمودی داشته باشی که داخل هر بخشش، یه list افقی هم باشه. مثلاً چیزی شبیه به نمایش دسته‌بندی محصولات در اپلیکیشن‌های فروشگاهی. بیا یه نمونه ببینیم:

@Composable
fun CombinedLists() {
    val categories = listOf("Section-1", "Section-2", "Section-3")
    val items = (1..10).toList()
    LazyColumn {
        items(categories) { category ->
            Text(
                text = category,
                style = MaterialTheme.typography.h5,
                modifier = Modifier.padding(16.dp)
            )
            LazyRow {
                items(items) { item ->
                    Card(
                        modifier = Modifier
                            .padding(8.dp)
                            .size(100.dp),
                        elevation = 4.dp
                    ) {
                        Box(contentAlignment = Alignment.Center) {
                            Text(text = "$item")
                        }
                    }
                }
            }
        }
    }
}

توضیحات:

• اینجا از LazyColumn برای اسکرول عمودی استفاده کردیم.
• داخل هر بخش، یه LazyRow قرار دادیم که آیتم‌هاش افقی پیمایش می‌شن.
• این ساختار برای طراحی‌های پیچیده مثل نمایش دسته‌بندی‌های مختلف محصولات خیلی کاربردیه.

نتیجه‌گیری

Jetpack Compose ابزارهای خیلی قدرتمندی برای ساخت list ها داره. چه یه لیست ساده بخوای بسازی، چه یه طراحی پیچیده با ترکیب لیست‌ها، می‌تونی از کامپوننت‌هایی مثل LazyColumn، LazyRow، و LazyVerticalGrid استفاده کنی.

پیشنهادات بیشتر:

• از انیمیشن‌ها برای جذاب‌تر کردن list استفاده کن (مثلاً با animateItemPlacement).
• برای داده‌های بزرگ، عملکرد list رو بهینه‌سازی کن.
• با استفاده از Modifier و کامپوزبل‌های سفارشی، خلاقیت خودتو به کار بگیر.

موفق باشی و خوش بگذره با کدنویسی! 😊