List — यह क्या है, SwiftUI में सूची घटक

SwiftUI में List क्या है?

List एक View है जो आइटमों के अनुक्रम को लंबवत स्क्रॉल करने योग्य सूची में प्रदर्शित करता है। इसे iOS 13 में SwiftUI के साथ पेश किया गया था और यह डेटा सूचियों को प्रदर्शित करने का प्राथमिक तरीका है, जो UIKit के UITableView की जगह लेता है। List स्वचालित रूप से कोशिका पुन: उपयोग, स्क्रॉलिंग और प्रदर्शन का प्रबंधन करता है।

List लेज़ी-लोडिंग का उपयोग करता है: कोशिकाएँ स्क्रॉल करने पर बनाई जाती हैं, एक साथ नहीं। यह इसे ScrollView के अंदर VStack और ForEach से अलग करता है, जहाँ सभी कोशिकाएँ रेंडर समय पर बनाई जाती हैं। List स्वाइप क्रियाओं, पुल-टू-रिफ्रेश, संपादन (हटाना/स्थानांतरित करना) और पंक्ति चयन के लिए अंतर्निहित समर्थन भी प्रदान करता है।

Apple WWDC 2021 (Session 10072) के अनुसार, iOS 15+ में List को संग्रह स्तर पर एक नए diffing तंत्र के कारण महत्वपूर्ण प्रदर्शन सुधार मिले। इसने डेटा अपडेट करते समय List को अधिक कुशल बना दिया, विशेष रूप से सैकड़ों पंक्तियों वाली सूचियों के लिए।

List बनाम ScrollView + VStack

डेवलपर्स अक्सर Views के सेट को प्रदर्शित करने के लिए List और ScrollView के साथ VStack के बीच चयन करते हैं। मुख्य अंतर: List कोशिका पुन: उपयोग (जैसे UITableView) का उपयोग करता है, जबकि ScrollView + VStack सभी Views को तुरंत बनाता है। निश्चित आकार की सूचियों (20 आइटम तक) के लिए, अंतर नगण्य है। 50+ पंक्तियों वाली गतिशील सूचियों के लिए, प्रदर्शन के लिए List बेहतर है।

स्थिर और गतिशील सूचियाँ

स्थिर सूची एक निश्चित संख्या में पंक्तियों वाली सूची है जो सीधे List बॉडी में निर्दिष्ट की जाती हैं। इसका उपयोग मेनू, सेटिंग्स और ज्ञात आइटम सेट वाले फॉर्म के लिए किया जाता है। प्रत्येक पंक्ति बिना लूप या ForEach के स्पष्ट रूप से घोषित की जाती है।

// स्थिर सूची (मेनू और सेटिंग्स के लिए)
List {
    Text("प्रोफ़ाइल")
    Text("सेटिंग्स")
    Text("बारे में")
}

// गतिशील सूची (डेटा के लिए)
struct UserList: View {
    let users: [User]

    var body: some View {
        List(users) { user in
            HStack {
                Text(user.name)
                Text(user.role)
                    .foregroundColor(.secondary)
            }
        }
    }
}

गतिशील सूची List(data:rowContent:) इनिशियलाइज़र या List बॉडी के अंदर ForEach का उपयोग करती है। पहला दृष्टिकोण सुविधाजनक है जब प्रत्येक पंक्ति एक डेटा आइटम से मेल खाती है। दूसरा तब उपयोगी होता है जब डेटा के बीच अनुभाग या अतिरिक्त आइटम हों।

पहचान (Identifiable): गतिशील सूचियों के लिए, डेटा आइटम को Identifiable प्रोटोकॉल का पालन करना चाहिए, या data:id टुपल में एक अद्वितीय पहचानकर्ता के लिए KeyPath निर्दिष्ट करना होगा। SwiftUI परिवर्तनों को ट्रैक करने के लिए पहचानकर्ताओं का उपयोग करता है: जोड़ना, हटाना और पंक्तियों को स्थानांतरित करना।

अनुभाग और डेटा समूहीकरण

Section एक View है जो List में शीर्षक और वैकल्पिक footer के साथ पंक्तियों को समूहित करती है। Section header और footer को ViewBuilder के रूप में स्वीकार करता है, जिससे अनुभाग शीर्षकों के लिए न केवल टेक्स्ट बल्कि कस्टम Views का उपयोग करना संभव होता है।

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("खाता")) {
                Text("नाम")
                Text("ईमेल")
            }
            Section(header: Text("सूचनाएँ")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// ForEach के साथ गतिशील अनुभाग
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

List शैलियाँ: SwiftUI .listStyle() मॉडिफ़ायर के माध्यम से कई अंतर्निहित शैलियाँ प्रदान करता है। .insetGrouped — iOS Settings के लिए मानक, .plain — न्यूनतम, .inset — इंडेंटेशन के साथ, .sidebar — iPad पर Sidebar के लिए।

SwiftUI Cookbook (2024) के अनुसार, गतिशील अनुभागों और अंदर ForEach के साथ Section जटिल संरचना वाले अनुप्रयोगों में डेटा समूहीकरण के लिए एक मानक पैटर्न है। मुख्य नियम: Section को Section के अंदर नेस्ट न करें, और List(data:) इनिशियलाइज़र का उपयोग Section के साथ न करें — List बॉडी के अंदर ForEach का उपयोग करें।

स्वाइप क्रियाएँ और पुल-टू-रिफ्रेश

.swipeActions(edge:allowsFullSwipe:content:) — iOS 15+ के लिए एक मॉडिफ़ायर जो List पंक्तियों में स्वाइप क्रियाएँ जोड़ता है। यह बाएँ (डिफ़ॉल्ट) या दाएँ स्वाइप करने पर विभिन्न रंगों और भूमिकाओं (destructive, cancel) के साथ बटन प्रदर्शित करने की अनुमति देता है।

struct TaskList: View {
    @Binding var tasks: [Task]

    var body: some View {
        List {
            ForEach($tasks) { $task in
                Text(task.title)
                    .swipeActions(edge: .trailing) {
                        Button("हटाएँ", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "पूर्ववत करें" : "हो गया") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // एसिंक डेटा लोडिंग
            await loadTasks()
        }
    }
}

.refreshable — iOS 15+ के लिए एक मॉडिफ़ायर जो पुल-टू-रिफ्रेश जोड़ता है। यह एक async क्लोज़र स्वीकार करता है जो तब निष्पादित होता है जब उपयोगकर्ता सूची को नीचे खींचता है। SwiftUI स्वचालित रूप से लोडिंग इंडिकेटर प्रदर्शित करता है। ऑपरेशन पूरा होने के बाद, इंडिकेटर छिप जाता है।

.onDelete और .onMove — iOS 13+ के लिए मॉडिफ़ायर जो पंक्ति हटाने और पुनर्क्रमण के लिए समर्थन जोड़ते हैं। इनका उपयोग करने के लिए, डेटा को Binding के साथ ForEach में लपेटें या List या ForEach पर .onDelete(perform:) के माध्यम से क्लोज़र पास करें।

List का प्रदर्शन और अनुकूलन

List का प्रदर्शन पंक्तियों की संख्या, प्रत्येक कोशिका की जटिलता और डेटा अपडेट की आवृत्ति पर निर्भर करता है। SwiftUI लेज़ी-लोडिंग और कोशिका पुन: उपयोग (UITableView.dequeueReusableCell के समान) का उपयोग करता है, लेकिन 500+ पंक्तियों वाली सूचियों के लिए अतिरिक्त अनुकूलन की आवश्यकता हो सकती है।

समस्या 1: बार-बार अपडेट. यदि सूची में डेटा बार-बार अपडेट होता है (उदाहरण के लिए, हर सेकंड), तो List प्रत्येक स्थिति परिवर्तन पर दृश्य कोशिकाओं को पुनः आरेखित कर सकता है। समाधान: डेटा के लिए संरचनाओं (value types) का उपयोग करें — SwiftUI उनकी तुलना मान द्वारा करता है और केवल बदली हुई पंक्तियों को पुनः आरेखित करता है।

समस्या 2: भारी कोशिकाएँ. यदि प्रत्येक पंक्ति में जटिल View पदानुक्रम, चित्र और एनिमेशन हैं, तो स्क्रॉलिंग धीमी हो सकती है। समाधान: कोशिकाओं को अलग-अलग Views में निकालें, अनावश्यक पुनः आरेखण को रोकने के लिए EquatableView का उपयोग करें। SwiftUI Lab (2024) के अनुसार, एक जटिल पंक्ति को उप-घटकों में विभाजित करने से रेंडरिंग समय 30–50% कम हो जाता है।

समस्या 3: बड़ी संख्या में पंक्तियाँ. 1000+ पंक्तियों के साथ, List लेज़ी-लोडिंग के कारण अभी भी कुशलता से काम करता है, लेकिन लेआउट गणना के कारण प्रारंभिक लोडिंग धीमी हो सकती है। समाधान: LazyVStack का उपयोग केवल समान पंक्तियों वाली सूचियों के लिए करें जहाँ List सुविधाओं (स्वाइप, अनुभाग) की आवश्यकता नहीं है। पूर्ण-सुविधा वाली सूचियों के लिए, List सबसे अच्छा विकल्प बना हुआ है।