Selama hampir 20 tahun (sejak 2008) ketika kami harus menambahkan daftar ke aplikasi kami untuk Android, kami menggunakan ListView , yang kemudian ditingkatkan menjadi RecyclerView (pada 2014) sebagai bagian dari Desain Material di Pustaka Dukungan Android dan kemudian ditambahkan sebagai bagian dari androidX (tahun 2018).

Kemudian, pada tahun 2019 cara baru bekerja dengan UI diumumkan di Google IO dan 2 tahun kemudian pada tahun 2021, Google merilis versi stabil pertama dari Jetpack Compose .
Saya tidak akan membahas semua perbedaan antara bekerja dengan compose dan cara lama menggunakan xml, selain menyebutkan 3 keuntungan utama:

• pengkodean yang lebih sedikit
• satu sumber kebenaran (seperti yang akan Anda lihat pada contoh di bawah)
• mendapatkan fitur baru/perbaikan bug

Cara Lama

1. Tambahkan ke xml yang mewakili tata letak layar elemen RecycleView

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/series_item" />

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    tools:context=".MainActivity"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="150dp"
        android:layout_height="150dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="15dp"
            android:text="Item"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_below="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="15dp"
            android:text="Item"
            android:textColor="@color/white"
            android:textSize="14sp"
             />
    </RelativeLayout>



</LinearLayout>

class SeriesItemAdapter(private val list: List<Series>) : RecyclerView.Adapter<SeriesItemAdapter.SeriesDataHolder>() {


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SeriesDataHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.series_item, parent, false)

        return SeriesDataHolder(view)
    }

    override fun onBindViewHolder(holder: SeriesDataHolder, position: Int) {
        val series = list[position]

        holder.imageView.setImageResource(series.imageId)
        holder.titleView.text = series.title
        holder.descriptionView.text = series.description
    }

    override fun getItemCount(): Int {
        return list.size
    }

    class SeriesDataHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageview)
        val titleView: TextView = itemView.findViewById(R.id.title)
        val descriptionView: TextView = itemView.findViewById(R.id.description)
    }

}

val seriesList = findViewById<RecyclerView>(R.id.recyclerview)
        seriesList.layoutManager = LinearLayoutManager(this)
        val adapter = SeriesItemAdapter(SeriesDataProvider.seriesList)
        seriesList.adapter = adapter

2. 2 xml yang perlu Anda konfigurasi untuk daftar.
3. Tempat di kode tempat Anda menghubungkan xml tersebut.
4. Kelas adaptor yang mewakili pemegang data dan pengikat.

Cara Baru

1. Gunakan LazyColumn yang dapat disusun untuk daftar

@Composable
    fun SeriesList() {
        LazyColumn(
            modifier = Modifier.background(Color.Black)
        ) {
            items(
                items = SeriesDataProvider.seriesList,
                itemContent = {
                    Series(series = it)
                }
            )
        }
    }

Row() {
            Image(
                modifier =  Modifier.size(150.dp).align(Alignment.CenterVertically),
                painter =  painterResource(id = series.imageId),
                contentDescription = "")
            Column(
                modifier = Modifier
                .padding(16.dp)
                .align(Alignment.CenterVertically)
            ) {
                Text(color = Color.White, text = series.title, style = typography.h6)
                Text(color = Color.White,text = series.description, style = typography.caption)
            }
        }