ListItemを使って1行分のレイアウトを作る
最終更新日:2024-01-30
    
    リストの1行分のレイアウトですが、マテリアルデザインの仕様にあっているものでよい場合は ListItem
 を使うと便利です。
テキストのみ
View Systemでは android.R.layout.simple_list_item_1
 を使っていたケースでしょうか。
import androidx.compose.material3.ListItem
val names = (1..100).map { "モケラ $it 号" }
@Composable
fun MainScreen() {
  LazyColumn {
    items(names) { name ->
      ListItem(
        headlineContent = {
          Text(name)
        },
      )
    }
  }
}
表示は次のようになります。

テキスト2行
supportingContent
 を使います。
val names = (1..100).map { "モケラ $it 号" }
@Composable
fun MainScreen() {
  LazyColumn {
    itemsIndexed(names) { index, name ->
      ListItem(
        headlineContent = {
          Text(name)
        },
        supportingContent = {
          Text("$index 番目")
        }
      )
    }
  }
}
表示は次のようになります。

先頭にチェックボックス
まとめて削除の機能を実装したりする際に使うとよさそうです。
data class Item(
  val id: Int,
  val name: String,
)
val mokeras = (1..100).map {
  Item(
    id = it,
    name = "モケラ $it 号",
  )
}
@Composable
fun MainScreen() {
  var checkedIdSet by remember {
    mutableStateOf(emptySet<Int>())
  }
  LazyColumn {
    items(mokeras) { mokera ->
      ListItem(
        headlineContent = {
          Text(mokera.name)
        },
        leadingContent = {
          Checkbox(
            checked = checkedIdSet.contains(mokera.id),
            onCheckedChange = { checked ->
              checkedIdSet = if (checked) {
                checkedIdSet + mokera.id
              } else {
                checkedIdSet - mokera.id
              }
            }
          )
        }
      )
    }
  }
}
表示は次のようになります。

末尾にアイコン
trailingContent
 で指定します。
val names = (1..100).map { "モケラ $it 号" }
@Composable
fun MainScreen() {
  LazyColumn {
    items(names) { name ->
      ListItem(
        headlineContent = {
          Text(name)
        },
        trailingContent = {
          IconButton(onClick = { /*TODO*/ }) {
             Icon(
               imageVector = Icons.Default.Info,
                 contentDescription = ""
               )
            }
        }
      )
    }
  }
}
表示は次のようになります。


