🤙🏿 🥞 🙇🏽 SwiftUI: सूची दृश्य में विस्तार योग्य / बंधनेवाला अनुभाग बनाना 😏 🧑🏾 🙆🏿

IOS के विकास में एक सामान्य कार्य UITableView में विस्तार योग्य / तह अनुभाग है। आज हम SwiftUI का उपयोग करके इस कार्य को साकार कर रहे हैं। एक छोटे से मोड़ के रूप में, अनुभाग हेडर में एक एनिमेटेड त्रिकोण जोड़ें और कोशिकाओं को भी विस्तारित करें।

MacOS Catalina 10.15.1 के लिए Xcode 11.2 पर विकास हुआ

प्रोजेक्ट शुरू करें

लॉन्च Xcode, फ़ाइल - नई परियोजना - एकल दृश्य ऐप। संवाद बॉक्स में, स्विफ्ट विकास भाषा निर्दिष्ट करें, हम SwiftUI का उपयोग करके यूआई बनाएंगे।

डेटा

प्रदर्शन डेटा के रूप में, हम लैटिन में रूसी में उनके अनुवाद के साथ कई मज़ेदार पंखों वाले अभिव्यक्तियों का उपयोग करेंगे।

प्रोजेक्ट में एक नई स्विफ्ट फ़ाइल जोड़ें, इसे Data.swift कहें और निम्नलिखित लिख दें:

struct QuoteDataModel : Identifiable { var id: String { return latin } var latin : String var russian : String var expanded = false } struct SectionDataModel : Identifiable { var id: Character { return letter } var letter : Character var quotes : [QuoteDataModel] var expanded = false }

QuoteDataModel एक एकल अभिव्यक्ति का एक मॉडल है, भविष्य में यह प्रत्येक व्यक्तिगत सेल की सामग्री बन जाएगा। इसमें हम अभिव्यक्ति के मूल पाठ, उसके अनुवाद और "विस्तारित" सेल के संकेत को संग्रहीत करते हैं (डिफ़ॉल्ट रूप से यह "न्यूनतम" है)

SectionDataModel प्रत्येक अलग सेक्शन का एक मॉडल है, यहाँ हम अनुभाग के "अक्षर" को संग्रहीत करते हैं, इस पत्र के साथ शुरू होने वाले उद्धरणों की एक सरणी और "विस्तारित" खंड का एक संकेत (डिफ़ॉल्ट रूप से "ढह गया")

भविष्य में, हम एक सूची दृश्य में यह सब प्रदर्शित करेंगे, जिसके लिए आवश्यक है कि इसके लिए डेटा पहचान योग्य प्रोटोकॉल का अनुपालन करे। ऐसा करने के लिए, हम आईडी प्रॉपर्टी को परिभाषित करते हैं, जो सूची में प्रत्येक आइटम के लिए अद्वितीय होनी चाहिए।

इसके अलावा, उसी Data.swift फ़ाइल में, हम अपना डेटा बनाते हैं:

 var latinities : [SectionDataModel] = [ SectionDataModel(letter: "C", quotes: [ QuoteDataModel(latin: "Calvitium non est vitium, sed prudentiae indicium.", russian: "  ,   ."), QuoteDataModel(latin: "Conjecturalem artem esse medicinam.", russian: "   ."), QuoteDataModel(latin: "Crede firmiter et pecca fortiter!", russian: "    !")]), SectionDataModel(letter: "H", quotes: [ QuoteDataModel(latin: "Homo sine religione sicut equus sine freno.", russian: "      ."), QuoteDataModel(latin: "Habet et musca splenem.", russian: "   .")]), SectionDataModel(letter: "M", quotes: [ QuoteDataModel(latin: "Malum est mulier, sed necessarium malum.", russian: "   ,   ."), QuoteDataModel(latin: "Mulierem ornat silentium.", russian: "  .")])]

आइए इंटरफ़ेस से निपटें

अब हम यह निर्धारित करेंगे कि अनुभाग शीर्ष और प्रत्येक सेल कैसा दिखेगा।

मेनू से फ़ाइल - नया - फ़ाइल - स्विफ्टयूआई चुनें। फ़ाइल का नाम HeaderView.swift रखें और उसकी सामग्री को निम्न के साथ बदलें:

 import SwiftUI struct HeaderView : View { var section : SectionDataModel var body: some View { HStack() { Spacer() Text(String(section.letter)) .font(.largeTitle) .foregroundColor(Color.black) Spacer() } .background(Color.yellow) } } struct HeaderView_Previews: PreviewProvider { static var previews: some View { HeaderView(section: latinities[0]) } }

अब फिर से फाइल - नया - फाइल - स्विफ्टयूआई व्यू। फ़ाइल का नाम QuoteView.swift रखें और उसकी सामग्री को निम्नलिखित के साथ बदलें:

 import SwiftUI struct QuoteView: View { var quote : QuoteDataModel var body: some View { VStack(alignment: .leading, spacing: 5) { Text(quote.latin) .font(.title) if quote.expanded { Group() { Divider() Text(quote.russian).font(.body) }.transition(.move(edge: .top)).animation(.default) } } } } struct QuoteView_Previews: PreviewProvider { static var previews: some View { QuoteView(quote: latinities[0].quotes[0]) } }

अब ContentView.swift फ़ाइल खोलें और निम्नानुसार ContentView की संरचना बदलें:

 struct ContentView: View { var body: some View { List { ForEach(latinities) { section in Section(header: HeaderView(section: section), footer: EmptyView()) { if section.expanded { ForEach(section.quotes) { quote in QuoteView(quote: quote) } } } } } .listStyle(GroupedListStyle()) } }

बधाई हो, आपने सूची को अप-टू-डेट डेटा के साथ आबाद किया है! लैटिनिटी एरे के प्रत्येक तत्व के लिए , हम हेडर व्यू के आधार पर हेडर के साथ एक अनुभाग बनाते हैं और एक खाली पाद लेख के साथ। यदि अनुभाग "विस्तारित" है, तो उद्धरण सरणी में प्रत्येक अभिव्यक्ति के लिए हम उद्धरण के आधार पर एक सेल बनाते हैं । हमारे डेटा में, सभी अनुभाग और सभी सेल "ढह गए" हैं, इसलिए यदि आप कैनवास को दृश्यमान बनाते हैं, तो आप केवल अनुभाग हेडर देखेंगे:

जैसा कि आप समझते हैं, अब आवेदन पूरी तरह से "मृत" है और अभी भी हमारे अंतिम लक्ष्य से बहुत दूर है। लेकिन जल्द ही हम इसे ठीक कर देंगे!

सेक्शन हेडर को थोड़ा संशोधित करें

HeaderView.swift फ़ाइल पर वापस जाएं। शीर्षलेख दृश्य संरचना के अंदर, शरीर के तुरंत बाद, इसे जोड़ें:

 struct Triangle : Shape { func path(in rect: CGRect) -> Path { var path = Path() path.move(to: CGPoint(x: 0, y: 0)) path.addLine(to: CGPoint(x: 0, y: rect.height - 1)) path.addLine(to: CGPoint(x: sqrt(3)*(rect.height)/2, y: rect.height/2)) path.closeSubpath() return path } }

यह संरचना एक समबाहु त्रिभुज लौटाती है। अब हमारे त्रिकोण को हेडर में जोड़ें। पहले स्पेसर को जोड़ने से पहले, HStack के अंदर:

 Triangle() .fill(Color.black) .overlay( Triangle() .stroke(Color.red, lineWidth: 5) ) .frame(width : 50, height : 50) .padding() .rotationEffect(.degrees(section.expanded ? 90 : 0), anchor: .init(x: 0.5, y: 0.5)).animation(.default))

डेटा संशोधित करें

हमारे डेटा पर वापस जाएं। Data.swift खोलें और इस तरह से एक नए UserData वर्ग में हमारे लैटिनिटी ऐरे को लपेटें :

 class UserData : ObservableObject { @Published var latinities : [SectionDataModel] = [ SectionDataModel(letter: "C", quotes: [ QuoteDataModel(latin: "Calvitium non est vitium, sed prudentiae indicium.", russian: "  ,   ."), QuoteDataModel(latin: "Conjecturalem artem esse medicinam.", russian: "   ."), QuoteDataModel(latin: "Crede firmiter et pecca fortiter!", russian: "    !")]), SectionDataModel(letter: "H", quotes: [ QuoteDataModel(latin: "Homo sine religione sicut equus sine freno.", russian: "      ."), QuoteDataModel(latin: "Habet et musca splenem.", russian: "   .")]), SectionDataModel(letter: "M", quotes: [ QuoteDataModel(latin: "Malum est mulier, sed necessarium malum.", russian: "   ,   ."), QuoteDataModel(latin: "Mulierem ornat silentium.", russian: "  .")])] }

@Published के रूप में लैटिन को भी चिह्नित करना याद रखें।

हमने क्या किया है?

ऑब्जर्वेबलऑब्जेक्ट हमारे डेटा के लिए एक विशेष वस्तु है जो कुछ दृश्य के लिए "बाध्य" हो सकता है। स्विफ्टयूआई सभी परिवर्तनों को "मॉनिटर" करता है जो व्यू को प्रभावित कर सकते हैं और, डेटा बदलने के बाद, व्यू को बदलता है।

लैटिन के "रैपिंग" के बाद, हमारे पास बहुत सारी त्रुटियां थीं, हम उन्हें ठीक कर देंगे। HeaderView.swift खोलें और इस प्रकार HeaderView_Previews की संरचना को ठीक करें:

 struct HeaderView_Previews: PreviewProvider { static var previews: some View { HeaderView(section: UserData().latinities[0]) } }

अब QuoteView.swift के समान परिवर्तन करें:

 struct QuoteView_Previews: PreviewProvider { static var previews: some View { QuoteView(quote: UserData().latinities[0].quotes[0]) } }

ContentView.swift फ़ाइल खोलें और इसे शरीर की घोषणा से पहले जोड़ें

 @ObservedObject var userData = UserData()

परिदृश्य को पुनर्जीवित करें

सामग्री पर वापस जाएं ContentView.swift। ContenView संरचना के अंदर, उपयोगकर्ताडेटा परिभाषा के तुरंत बाद, दो कार्य जोड़ें:

 func sectionIndex(section : SectionDataModel) -> Int { userData.latinities.firstIndex(where: {$0.letter == section.letter})! } func quoteIndex(section : Int, quote : QuoteDataModel) -> Int { return userData.latinities[section].quotes.firstIndex(where: {$0.latin == quote.latin})! }

उस अनुभाग हेडर और सेल में onTapGesture संशोधक जोड़ें जो हम बना रहे हैं। शरीर की सामग्री का अंतिम दृश्य:

 var body: some View { List { ForEach(userData.latinities) { section in Section(header: HeaderView(section: section) .onTapGesture { self.userData.latinities[self.sectionIndex(section: section)].expanded.toggle() }, footer: EmptyView()) { if section.expanded { ForEach(section.quotes) { quote in QuoteView(quote: quote) .onTapGesture { let sectionIndex = self.sectionIndex(section: section) let quoteIndex = self.quoteIndex(section: sectionIndex, quote: quote) self.userData.latinities[sectionIndex].quotes[quoteIndex].expanded.toggle() } } } } } } .listStyle(GroupedListStyle()) }

SectionIndex और quotUndex फ़ंक्शंस उन खंडों और उनके पास दिए गए भावों के सूचकांक को लौटाते हैं। इन अनुक्रमों को प्राप्त करने के बाद, हम अपने सरणी के लैटिन में विस्तारित गुणों के मूल्यों को बदलते हैं , जो खंड या अभिव्यक्ति के तह / खुलासा की ओर जाता है।

निष्कर्ष

तैयार परियोजना को यहां डाउनलोड किया जा सकता है ।

कुछ उपयोगी लिंक:

मुझे उम्मीद है कि प्रकाशन आपके लिए उपयोगी होगा!

SwiftUI: सूची दृश्य में विस्तार योग्य / बंधनेवाला अनुभाग बनाना