Jetpack Compose チュートリアル1

理解出来てなかった部分のメモ

materialとmaterial3では色指定方法が若干違う

material→MaterialTheme.colors.secondary
material3→MaterialTheme.colorScheme.secondary

ダークテーマの確認

Composeの前に以下でプレビューにも表示される
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)

リスト

LazyColumnに必要な情報のリストを渡して表示
ここでは表示するMessageCardの中に各要素を表示するTextを置いている
SampleDataはMessageのリスト

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.secondary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(msg = message)
        }
    }
}

@Preview
@Composable
fun PreviewConversation() {
    ComposeTutorialTheme() {
        Conversation(messages = SampleData.conversationSample)
    }
}

Composeの状態

remember, mutableStateOf等を使って状態を監視、変更できる

var isExpanded by remember { mutableStateOf(false) }
Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = msg.author,
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )
...省略
)