Jetpack Compose Glimmer の Text コンポーネントは、基本的なテキストを基盤として構築されており、色、フォントサイズ、フォント スタイル、フォントの太さ、フォント ファミリー、文字間隔、テキストの配置など、さまざまなテキスト プロパティを設定できます。Jetpack Compose の Glimmer Text コンポーネントは、カラー マッチングをインテリジェントに管理するという点で独自性があります。たとえば、色のオーバーライドが指定されていない場合、テキストは UI 階層内の最も近いサーフェスによって提供されるコンテンツ色にデフォルト設定されます。
例: ボックス内にテキストの見出しを作成する
@Composable
fun GlimmerStyleSample() {
GlimmerTheme {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(
text = "This is a sample heading",
color = GlimmerTheme.colors.secondary
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { /* Handle Click */ }) {
Text(text = "Sample Button")
}
}
}
}
}
コードに関する主なポイント
Buttonコンポーザブルは自動的に操作可能になり、Colors.surfaceの背景が設定され、テキストは自動的に次のように設定されます。- style =
GlimmerTheme.typography.bodyMedium - color =
GlimmerTheme.Colors.surface
- style =