Jetpack Compose Glimmer のボタン

対応する XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

[]

XR デバイスのタイプについて →

Jetpack Compose Glimmer の Button は、ディスプレイ グラスの入力に 最適化されたインタラクティブなコンポーネントで、状態を通じて明確な視覚的フィードバックを提供し、ユーザー アクションをガイドします。

ボタンは、Jetpack Compose Glimmer サーフェス システム上に構築されており、ボーダーや奥行きなどの物理プロパティを 自動的に処理します。

標準ボタンには、テキストラベルと任意のアイコンが含まれます。プライマリ アクションまたはセカンダリ アクションに使用できます。Jetpack Compose Glimmer では、アイコン ボタンや切り替えボタンなどの特殊なボタンも 個別のコンポーネントとして定義されています。

デフォルト

大

解剖学

ボタンは、コンテナとラベルで構成され、先頭と末尾にアイコンを配置できます。

サイズ

Jetpack Compose Glimmer ボタンは、2 つのサイズ バリアントをサポートしています。これらは、最小の高さと内部パディングに影響します。

州

Jetpack Compose Glimmer のボタンは、状態を伝えるために外観を変更します。

• 有効: インタラクティブ ボタンのデフォルトの状態。
• フォーカス: フォーカスすると、ボタンに GlimmerTheme.depthEffectLevels.level1 とフォーカスされたボーダー ハイライトが適用されます。
• 押下: 有効にすると、半透明の白いオーバーレイが サーフェスに適用されます。
• 無効: ボタンは入力に応答せず、外観 が調整されます。

ボタンのデフォルト

標準ボタンには、次のデフォルトが適用されます。

• デフォルトでは、ボタンは GlimmerTheme.typography.bodySmall を使用します。ボタン内のテキストは簡潔で、アクションを明確に説明していることを確認してください。
• ボタンのデフォルトの形状は GlimmerTheme.shapes.large です。この一貫した丸みにより、ユーザーはディスプレイ グラス インターフェース全体でボタンを識別できます。

例: テキストとアイコンを含むボタン

基本的なボタンにはテキストラベルのみが含まれますが、テキストの先頭（leadingIcon を使用）または末尾（trailingIcon を使用）にアイコンを追加して、追加のコンテキストを提供することもできます。

次のコードは、先頭と末尾の両方にアイコンを含むボタンを作成します。

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

ボタン グループ

ButtonGroup コンポーザブルを使用すると、ボタンをフォーカス コントローラとして機能するスクロール可能な行 にグループ化できます。ユーザーがスクロールすると、フォーカスが自動的に移動し、現在のスクロール位置に対応するボタンがハイライト表示されます。

例: ボタン グループ

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

ボタン グループのフォーカス制御

グループ内の任意のボタンにフォーカスを移動して、選択を手動で制御できます。

ButtonGroup の状態を使用して、スクロール動作をカスタマイズして制御します。

1. rememberButtonGroupState で状態を宣言します。
2. ButtonGroup コンポーザブルに渡します。
3. animateScrollToItem（または scrollToItem で即時 スクロール）を呼び出して、特定の項目にスクロールし、フォーカスを自動的に移動します。

次のコードでは、クリックするとフォーカスがボタンから別のボタンに移動します。

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt