ציון מצב המיקוד

מצב התמקדות במודעה מספק רמז חזותי ברור שעוזר למשתמשים להבין איזה רכיב בממשק המשתמש נמצא כרגע במיקוד הקלט. כל הרכיבים האינטראקטיביים של Material 3 מספקים אינדיקציות מובנות למיקוד כברירת מחדל.

אינדיקציה למיקוד בהתאמת העיצוב של Google Material Design

רכיבי Material משתמשים בפונקציה ripple וב-LocalIndication כדי לצייר שינויים במצב החזותי. כדי לצרף משוב סטנדרטי של Material Design על מיקוד לרכיב מותאם אישית:

  1. יוצרים MutableInteractionSource באמצעות remember { MutableInteractionSource() }.
  2. מעבירים את מקור האינטראקציה ל-modifier‏ indication, לצד 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")
}

הטמעת אינדיקטורים מותאמים אישית למיקוד

לרמזים חזותיים בהתאמה אישית (כמו שינוי קנה מידה, גבולות או אפקטים של זוהר):

  1. יוצרים IndicationNodeFactory.
  2. צפייה באינטראקציות של המיקוד שנוצרות על ידי InteractionSource של הרכיב.
  3. מחילים את האינדיקציה המותאמת אישית באמצעות המאפיין indication.

var interactionSource = remember { MutableInteractionSource() }

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

הקודם
שחזור המיקוד
הבא
תגובה להתמקדות