Jetpack Compose：アイコン付きテキストを作る

試行錯誤の記録。慣れるまでが一苦労。Android Studioのレイアウトエディターとか完全に無用の長物になってしまったな。

アイコン付きテキスト

左にアイコンがあってテキストが続くようなよくあるケース

@Composable
fun TextWithIcon() {
    Row(verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.wrapContentHeight()) {
        Icon(
            vectorResource(id = R.drawable.ic_info_black_20px),
            modifier = Modifier
                .height(18.dp)
                .width(18.dp)
                .align(Alignment.CenterVertically)
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(
            text = stringResource(id = R.string.sample_text),
            fontSize = 12.sp,
            modifier = Modifier.align(Alignment.CenterVertically)
        )
    }
}

ポイント

• 横に並べたいのでRowを使う
• アイコンとテキストの高さを揃えたいので親のRowで verticalAlignment() を指定
• SVG画像は vectorResource(id=) で取得
• アイコンとテキスト間の余白は Spacer で確保