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

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

אינדיקטור המיקוד של ערכת העיצוב Material

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

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

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