फ़ोकस की स्थिति के बारे में बताना

फ़ोकस की स्थिति से, उपयोगकर्ताओं को साफ़ तौर पर विज़ुअल क्यू मिलता है. इससे उन्हें यह समझने में मदद मिलती है कि फ़िलहाल किस यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर इनपुट फ़ोकस है. इंटरैक्टिव मटीरियल 3 के सभी कॉम्पोनेंट, डिफ़ॉल्ट रूप से फ़ोकस इंडिकेटर की सुविधा देते हैं.

मटीरियल थीम के फ़ोकस इंडिकेटर

विज़ुअल स्टेट में बदलाव करने के लिए, Material कॉम्पोनेंट ripple फ़ंक्शन और LocalIndication का इस्तेमाल करते हैं. किसी कस्टम कॉम्पोनेंट में स्टैंडर्ड मटीरियल फ़ोकस फ़ीडबैक अटैच करने के लिए:

1. remember { MutableInteractionSource() } का इस्तेमाल करके, 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")
}
FocusedState.kt

कस्टम फ़ोकस इंडिकेटर लागू करना

कस्टम विज़ुअल क्यू (जैसे कि स्केल करना, बॉर्डर या लाइटिंग इफ़ेक्ट) के लिए:

1. कोई IndicationNodeFactory बनाएँ.
2. तत्व के InteractionSource से निकलने वाले फ़ोकस इंटरैक्शन देखें.
3. indication मॉडिफ़ायर का इस्तेमाल करके, कस्टम इंडिकेशन लागू करें.

var interactionSource = remember { MutableInteractionSource() }

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