Android Jetpack Compose 捲動清單示範

以前都是使用 RecyclerView 建立可以捲動(滑動)的清單，但是 RecyclerView 使用起來有一點小麻煩，現在 Jetpack Compose 使用 LazyColumn 非常方便就可以達成：

    
// import androidx.compose.foundation.lazy.LazyColumn
// import androidx.compose.material3.Text


@Composable
fun ListTest(modifier: Modifier = Modifier) {
    val names = listOf("Android", "iOS", "Windows", "macOS", "Linux")

    LazyColumn() {
        items(
            names.size,
            itemContent = { index ->
                Text(text = names[index])
            }
        )
    }
}
    

嗯...看起來不能滑動啊
那我們再把內容放多一點，就會自動可以滑動了：

    
@Composable
fun ListTest(modifier: Modifier = Modifier) {
    val names = (1..100).map { "Item $it" }

    LazyColumn() {
        items(
            names.size,
            itemContent = { index ->
                Text(text = names[index])
            }
        )
    }
}
    

稍加調整，就可以建立「聊天清單」了！

    
//import androidx.compose.foundation.Image
//import androidx.compose.foundation.layout.Arrangement
//import androidx.compose.foundation.layout.Column
//import androidx.compose.foundation.layout.Row
//import androidx.compose.foundation.layout.Spacer
//import androidx.compose.foundation.layout.fillMaxHeight
//import androidx.compose.foundation.layout.fillMaxWidth
//import androidx.compose.foundation.layout.size
//import androidx.compose.foundation.lazy.LazyColumn
//import androidx.compose.material3.Divider
//import androidx.compose.material3.Text
//import androidx.compose.ui.graphics.Color
//import androidx.compose.ui.res.painterResource



/**
 * 自訂資料類別
 */
data class ListItem(val title: String, val content: String)


@Composable
fun ListTest(modifier: Modifier = Modifier) {

    val items = (1..100).map { ListItem("標題 $it", "內容 $it") }

    LazyColumn() {
        items(
            items.size,
            itemContent = { index ->

                val item = items[index]

                Surface(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(4.dp)
                ) {
                    Row() {
                        Image(
                            painter = painterResource(id = R.drawable.ic_launcher_background),
                            contentDescription = null,
                            modifier = Modifier
                                .size(80.dp)
                        )

                        Column(
                            modifier = Modifier
                                .fillMaxHeight()
                                .padding(start = 8.dp),
                            verticalArrangement = Arrangement.Center
                        ) {
                            Text(
                                text = item.title,
                                style = MaterialTheme.typography.headlineSmall
                            )
                            Spacer(Modifier.padding(vertical = 8.dp))
                            Text(text = item.content)
                        }
                    }
                }

                // 黑色分隔線
                Divider(
                    thickness = 0.5.dp,
                    color = Color.Black,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                )
            }
        )
    }
}
    

如果需要左右滑動則是換成 LayRow 。

參考資料：
Android Developers - Lists and grids