Jetpack Compose में UI इवेंट हैंडलिंग मास्टर करें

इस संक्षिप्त और व्यावहारिक लेख में, हम बात करेंगे कि Jetpack Compose में UI इवेंट को कैसे संभालें।

पुराने सिस्टम में, हम OnClickListeners और अन्य इंटरफेस का उपयोग करते थे। Compose में, हम Kotlin के सील्ड क्लासेस, फंक्शन टाइप्स और लैम्ब्डा एक्सप्रेशन का पूरा लाभ उठा सकते हैं।

यदि आप नहीं जानते कि कंपोजेबल क्या है, तो इस लेख को पढ़ने पर विचार करें जो बुनियादी बातों को समझाता है।

सील्ड क्लास के साथ UI इवेंट को कैसे मॉडल करें

सबसे पहले, हमें यह सीखना होगा कि UI इवेंट से क्या अभिप्राय है और उन्हें सील्ड क्लासेस के साथ कैसे मॉडल किया जाए।

मैंने इस प्रक्रिया को Java और Kotlin (पुराने व्यू सिस्टम के साथ) के लिए पहले वर्णित किया है, इसलिए मैं इसे संक्षिप्त रखूंगा।

प्रक्रिया

अपने UI की प्रत्येक स्क्रीन या सब-स्क्रीन के लिए, अपने आप से यह प्रश्न पूछें: उपयोगकर्ता इसके साथ इंटरैक्ट करने के सभी विभिन्न तरीके क्या हैं?

मेरे पहले ऐप से एक उदाहरण लेते हैं जिसे पूरी तरह से Compose में बनाया गया है, Graph Sudoku:

इस स्क्रीन के UI इंटरैक्शन को दर्शाने के लिए मैं जिस सील्ड क्लास का उपयोग करता हूं वह इस तरह दिखती है:

sealed class ActiveGameEvent { data class OnInput(val input: Int) : ActiveGameEvent() data class OnTileFocused(val x: Int, val y: Int) : ActiveGameEvent() object OnNewGameClicked : ActiveGameEvent() object OnStart : ActiveGameEvent() object OnStop : ActiveGameEvent() }

संक्षेप में समझाने के लिए:

• OnInput एक उपयोगकर्ता द्वारा इनपुट बटन को छूने का प्रतिनिधित्व करता है (जैसे 0, 1, 2, 3, 4)
• OnTileFocused एक उपयोगकर्ता द्वारा टाइल चुनने का प्रतिनिधित्व करता है (जैसे एम्बर हाइलाइटेड वाला)
• OnNewGameClicked स्वयं व्याख्यात्मक है
• OnStart और OnStop जीवनचक्र इवेंट हैं जिनकी मेरे कंपोजेबल को परवाह नहीं है, लेकिन वे Activity में उपयोग किए जाते हैं जो कंपोजेबल के लिए कंटेनर के रूप में कार्य करता है

एक बार जब आपकी सील्ड क्लास सेट हो जाती है, तो अब आप एक सिंगल इवेंट हैंडलर फ़ंक्शन का उपयोग करके विभिन्न प्रकार के इवेंट को संभाल सकते हैं। कभी-कभी कई इवेंट हैंडलर फ़ंक्शन रखना अधिक समझदारी भरा हो सकता है, इसलिए ध्यान रखें कि इस दृष्टिकोण को आपके प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुरूप अनुकूलित किया जाना चाहिए।

अपने सॉफ़्टवेयर आर्किटेक्चर को कैसे कनेक्ट करें

इन इवेंट को संभालने के लिए आपके पास क्या है यह पूरी तरह आप पर निर्भर करता है। कुछ लोग सोचते हैं कि MVVM GUI आर्किटेक्चर का स्वर्ण मानक है, लेकिन ऐसा लगता है कि अधिक से अधिक लोग यह महसूस कर रहे हैं कि ऐसी कोई एकल आर्किटेक्चर नहीं है जो हर स्थिति के लिए सबसे अच्छा काम करे।

Compose के साथ Android के लिए, मेरा वर्तमान दृष्टिकोण एक बहुत ही थर्ड-पार्टी न्यूनतम दृष्टिकोण का उपयोग करना है जिसमें आमतौर पर प्रत्येक सुविधा (स्क्रीन) में ये चीजें होती हैं:

• एक (प्रेजेंटेशन) लॉजिक क्लास एक इवेंट हैंडलर के रूप में
• View को रेंडर करने के लिए आवश्यक डेटा स्टोर करने के लिए एक ViewModel (जैसा कि नाम से पता चलता है)
• एक Activity जो कंटेनर के रूप में कार्य करती है (गॉड ऑब्जेक्ट नहीं)
• View बनाने के लिए कंपोजेबल

मुझे परवाह नहीं है कि आप क्या उपयोग करते हैं जब तक आप चिंताओं के पृथक्करण को लागू कर रहे हैं। इसी तरह मैं इस आर्किटेक्चर पर पहुंचा, बस यह पूछकर कि क्या एक ही क्लास में एक साथ रखा जाना चाहिए और क्या नहीं।

चाहे आप अपने ViewModel, एक Fragment, या एक Activity को अपना इवेंट हैंडलर बनाना चाहें, उन सभी को उसी तरह सेट अप किया जा सकता है: फंक्शन टाइप्स!

अपनी पसंद की क्लास के भीतर, एक इवेंट हैंडलर फ़ंक्शन सेट करें जो आपकी सील्ड क्लास को अपने तर्क के रूप में स्वीकार करता है:

class ActiveGameLogic( private val container: ActiveGameContainer?, private val viewModel: ActiveGameViewModel, private val gameRepo: IGameRepository, private val statsRepo: IStatisticsRepository, dispatcher: DispatcherProvider ) : BaseLogic<ActiveGameEvent>(dispatcher), CoroutineScope { //... override fun onEvent(event: ActiveGameEvent) { when (event) { is ActiveGameEvent.OnInput -> onInput( event.input, viewModel.timerState ) ActiveGameEvent.OnNewGameClicked -> onNewGameClicked() ActiveGameEvent.OnStart -> onStart() ActiveGameEvent.OnStop -> onStop() is ActiveGameEvent.OnTileFocused -> onTileFocused(event.x, event.y) } } //... }

यह दृष्टिकोण बहुत व्यवस्थित है और इस थर्ड-पार्टी लाइब्रेरी मुक्त क्लास में हर यूनिट को एक सिंगल एंट्री पॉइंट के माध्यम से परीक्षण करना आसान बनाता है।

हालांकि, हम अभी तक नहीं किए गए हैं। स्वाभाविक रूप से, हमें इस इवेंट हैंडलर फ़ंक्शन, onEvent, का संदर्भ अपने कंपोजेबल तक प्राप्त करने का एक तरीका चाहिए। हम इसे फ़ंक्शन रेफरेंस का उपयोग करके कर सकते हैं:

class ActiveGameActivity : AppCompatActivity(), ActiveGameContainer { private lateinit var logic: ActiveGameLogic override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val viewModel = ActiveGameViewModel() setContent { ActiveGameScreen( onEventHandler = logic::onEvent, viewModel ) } logic = buildActiveGameLogic(this, viewModel, applicationContext) } //... }

मुझे यकीन है कि आप में से कुछ सोच रहे हैं कि मैं Activity का उपयोग क्यों कर रहा हूं। आप कभी-कभी लाइवस्ट्रीम Q&A के दौरान मुझसे विस्तृत उत्तर के लिए पूछ सकते हैं।

संक्षेप में, Compose के साथ मेरा आर्किटेक्चर दृष्टिकोण (मैं Jetpack Navigation का उपयोग नहीं करता) के साथ Fragments थोड़े बेकार लगते हैं, और एक फीचर-विशिष्ट कंटेनर के रूप में Activities का उपयोग करने में कुछ भी गलत नहीं है। बस गॉड एक्टिविटी लिखने से बचें, मूल रूप से।

विशिष्ट होने के लिए, Kotlin में फ़ंक्शन का संदर्भ बनाने का तरीका, क्लास/इंटरफेस नाम प्रदान करना है (या इसे छोड़ दें यदि यह टॉप-लेवल फ़ंक्शन है), इसके बाद दो कोलन, और किसी भी तर्क या ब्रैकेट के बिना फ़ंक्शन का नाम:

onEventHandler = logic::onEvent

Jetpack Compose onClick मॉडिफायर के साथ onClickListener को कैसे बदलें

उस सामान के तैयार होने के साथ, हम देख सकते हैं कि यह कंपोजेबल के भीतर कैसे काम करता है। स्वाभाविक रूप से, आपके रूट कंपोजेबल को इवेंट हैंडलर फ़ंक्शन को पैरामीटर के रूप में चाहिए:

@Composable fun ActiveGameScreen( onEventHandler: (ActiveGameEvent) -> Unit, viewModel: ActiveGameViewModel ) { //... }

फंक्शन टाइप सिंटैक्स को सही ढंग से प्राप्त करना थोड़ा मुश्किल हो सकता है, लेकिन समझें कि यह वास्तव में एक फ़ंक्शन का संदर्भ है, जो क्लास के संदर्भ से इतना अलग नहीं है।

जैसे आपको गॉड ऑब्जेक्ट नहीं बनाने चाहिए, आपको विशाल कंपोजेबल नहीं बनाने चाहिए:

1. अपने UI को सबसे छोटे उचित भागों में तोड़ें
2. उन्हें एक कंपोजेबल फ़ंक्शन में लपेटें
3. प्रत्येक कंपोजेबल के लिए जिसमें उससे जुड़ा UI इंटरैक्शन है, उसे आपके इवेंट हैंडलर फ़ंक्शन का संदर्भ दिया जाना चाहिए

यहां एक कंपोजेबल है जो Sudoku ऐप के इनपुट बटन का प्रतिनिधित्व करता है, जिसे रेफरेंस द्वारा इवेंट हैंडलर दिया गया है:

@Composable fun SudokuInputButton( onEventHandler: (ActiveGameEvent) -> Unit, number: Int ) { Button( onClick = { onEventHandler.invoke(ActiveGameEvent.OnInput(number)) }, modifier = Modifier .requiredSize(56.dp) .padding(2.dp) ) { Text( text = number.toString(), style = inputButton.copy(color = MaterialTheme.colors.onPrimary), modifier = Modifier.fillMaxSize() ) } }

लॉजिक क्लास को वास्तव में इवेंट पास करने के लिए, हमें invoke फ़ंक्शन का उपयोग करना होगा, जो फंक्शन टाइप परिभाषा के अनुसार तर्क स्वीकार करेगा (जो इस मामले में ActiveGameEvent स्वीकार करता है)।

इस बिंदु पर, आप Kotlin (Compose या नहीं) में UI इंटरैक्शन इवेंट को संभालने के लिए तैयार हैं, इस खूबसूरत और आधुनिक प्रोग्रामिंग भाषा का पूरा लाभ उठाते हुए।

यदि आपको यह लेख पसंद आया, तो इसे सोशल मीडिया पर साझा करें और एक स्वतंत्र प्रोग्रामर और कंटेंट क्रिएटर का समर्थन करने के लिए नीचे दिए गए संसाधनों को देखने पर विचार करें।

सोशल

आप मुझे यहां Instagram पर और यहां Twitter पर पा सकते हैं।

यहां मेरे कुछ ट्यूटोरियल और कोर्स हैं

https://youtube.com/wiseass     https://www.freecodecamp.org/news/author/ryan-michael-kay/ https://skl.sh/35IdKsj (Android Studio के साथ Android का परिचय)