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

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

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

मटीरियल कॉम्पोनेंट, विज़ुअल स्टेट में होने वाले बदलावों को दिखाने के लिए, 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")
}

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

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

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

var interactionSource = remember { MutableInteractionSource() }

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

पीछे जाएं
फ़ोकस को पहले जैसा करें
आगे बढ़ें
फ़ोकस करने के लिए प्रतिक्रिया दें