Wskazywanie stanu aktywności

Stan aktywny zapewnia wyraźną wskazówkę wizualną, która pomaga użytkownikom zrozumieć, który element interfejsu jest obecnie aktywny. Wszystkie interaktywne komponenty Material 3 domyślnie zawierają wbudowane wskaźniki zaznaczenia.

Wskaźnik zaznaczenia w Material Theme

Komponenty Material Design używają funkcji ripple i LocalIndication do rysowania zmian stanu wizualnego. Aby dołączyć standardową reakcję na zaznaczenie w Material Design do komponentu niestandardowego:

  1. Utwórz MutableInteractionSource za pomocą remember { MutableInteractionSource() }.
  2. Przekaż źródło interakcji do modyfikatora indication wraz z ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}

Wdrażanie niestandardowych wskaźników zaznaczenia

W przypadku niestandardowych wskazówek wizualnych (takich jak skalowanie, obramowanie czy efekty świetlne):

  1. Utwórz IndicationNodeFactory.
  2. Obserwuj interakcje związane z fokusem, które są emitowane przez InteractionSource elementu.
  3. Zastosuj niestandardowe oznaczenie za pomocą modyfikatora indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}

Wstecz
Przywracanie zaznaczenia
Dalej
Reaguj, aby skupić