戻る
■アプリの作成(Jetpack Compose / 一覧)
基本的に以下の記事を参考にしたが、色々と追加調整が必要だった Jetpack Compose入門 アプリを作る知識-1(一覧作成~Modifier/Scaffold/Surface/Columnなど) https://zenn.dev/ko2ic/articles/32134efcc1f94b material3は試験運用版らしいので、そのための宣言が必要らしい Compose でマテリアル 2 からマテリアル 3 に移行する | Jetpack Compose | Android Developers https://developer.android.com/jetpack/compose/designsystems/material2-material3?hl=ja
@OptIn(ExperimentalMaterial3Api::class)
Scaffoldを使う際は、ConstraintLayoutの指定が必要みたい Jetpack Compose 1.2.0 では Scaffold の content に PaddingValues を必ず設定する - Infinito Nirone 7 https://blog.keithyokoma.dev/entry/2022/08/30/193024 Compose の ConstraintLayout | Jetpack Compose | Android Developers https://developer.android.com/jetpack/compose/layouts/constraintlayout?hl=ja
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
まとめると、以下でデータの一覧ができた
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloWorldTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { MainScreen() } } } } } @Composable fun MainScreen() { val mocks = (1..100).map { Pair("リストのタイトル$it", "これはリストのメッセージ${it}です。") } ListScreen(mocks) } @OptIn(ExperimentalMaterial3Api::class) @Composable private fun ListScreen(contents: List<Pair<String, String>>) { Scaffold( topBar = { TopAppBar( title = { Text("リストのサンプル") } ) } ) { innerPadding -> val context = LocalContext.current ConstraintLayout( modifier = Modifier.padding(innerPadding) ) { LazyColumn { items(contents.size) { index -> val content = contents[index] ListTitle(title = content.first, body = content.second) { Toast.makeText(context, content.second, Toast.LENGTH_SHORT).show() } } } } } } @Composable private fun ListTitle( title: String, body: String, onClick: () -> Unit ) { Surface( modifier = Modifier.clickable { onClick() }, shape = MaterialTheme.shapes.medium ) { Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(all = 8.dp) ) { Column( modifier = Modifier .fillMaxWidth() .padding(horizontal = 8.dp, vertical = 16.dp), ) { Text(title) Spacer(modifier = Modifier.height(4.dp)) Text(body) } } } }