تقديم SwiftUI: إنشاء تطبيق بسيط باستخدام TableView

خلال WWDC 2019 ، كانت إحدى أكثر اللحظات إثارة وإثارة هي إعلان إصدار SwiftUI. SwiftUI هو إطار جديد تمامًا يسمح لك بتصميم وتطوير واجهات المستخدم مع كتابة رمز أقل بطريقة تعريفية .

على عكس UIKit ، الذي كان يستخدم عادة بالاقتران مع لوحات العمل ، فإن SwiftUI يعتمد على البرامج تمامًا. ومع ذلك ، من السهل جدًا فهم بناء الجملة ويمكن عرض المشروع بسرعة باستخدام "المعاينة التلقائية".

نظرًا لأن SwiftUI يستخدم لغة Swift ، فإنه يسمح لك بإنشاء تطبيقات بنفس التعقيد برمز أقل بكثير. علاوة على ذلك ، يتيح استخدام SwiftUI تلقائيًا للتطبيق استخدام ميزات مثل Dynamic Type و Dark Mode و Localization و Accessibility . بالإضافة إلى ذلك ، يتوفر على جميع المنصات ، بما في ذلك macOS و iOS و iPadOS و watchOS و tvOS . لذلك ، يمكن الآن مزامنة رمز واجهة المستخدم الخاصة بك عبر جميع الأنظمة الأساسية ، مما يتيح لك مزيدًا من الوقت للتركيز على رمز ثانوي خاص بالنظام الأساسي.

حول هذا المقال

من المهم أن يتعلم المطورون كيفية استخدام SwiftUI في مرحلة سابقة ، حيث ستركز Apple في النهاية على معظم اهتمامها على هذا الإطار. في هذه المقالة ، سننظر إلى أساسيات SwiftUI ونتعرف على كيفية إنشاء الحد الأدنى من التنقل وعرض الصور والنصوص والقوائم من خلال إنشاء قائمة اتصال بسيطة تعرض جميع أعضاء فريقنا. عند اختيار أحد أعضاء الفريق ، يعرض التطبيق معلومات مفصلة تحتوي على صورة المستخدم مع سيرته الذاتية الموجزة. لنبدأ!

إطلاق Xcode 11 . في وقت كتابة هذا التقرير ، كان Xcode 11 لا يزال في مرحلة تجريبية ، لذلك قد لا تعمل بعض الميزات كما هو متوقع. في هذه المقالة سوف نستخدم Swift 5 . على الرغم من أن المعرفة المتقدمة بـ Swift غير مطلوبة في هذه المقالة ، إلا أنه لا يزال من المستحسن فهم أساسيات اللغة.

ملاحظة المحرر: للمعاينة والتفاعل مع الصور من Canvas في Xcode ، تأكد من تثبيت Mac OS 10.15 beta.

إنشاء مشروع جديد باستخدام SwiftUI

لنبدأ من جديد مرة أخرى حتى تتمكن من معرفة كيفية تشغيل تطبيق SwiftUI على الفور. افتح Xcode أولاً واختر "إنشاء مشروع Xcode جديد". لنظام iOS الأساسي ، حدد تطبيق Single View. أدخل اسمًا للتطبيق واملأ حقول النص. ومع ذلك ، تأكد من تحديد استخدام SwiftUI في الجزء السفلي. إذا لم تقم بتحديد هذا الخيار ، فسيقوم Xcode بإنشاء ملف لوحة العمل لك.



سيقوم Xcode تلقائيًا بإنشاء ملف خاص بك يسمى ContentView.swift ، وسيكون من المدهش أن يتم عرض معاينة للرمز على الجانب الأيمن ، كما هو موضح أدناه.



إذا لم تشاهد المعاينة ، فيجب عليك النقر فوق الزر "استئناف" في منطقة المعاينة. سيستغرق تجميع المشروع بعض الوقت. التحلي بالصبر وانتظر استكمال التجميع.

الآن دعونا نرى كيف يمكنك تعديل هذه الملفات لإنشاء تطبيق.

إنشاء عرض قائمة

يتم إنشاء عرض قائمة على ثلاث مراحل. أول واحد هو إنشاء خطوط في القائمة. ربما يشبه التصميم UITableView. للقيام بذلك ، قم بإنشاء ContactRow. المرحلة الثانية هي نقل البيانات اللازمة إلى القائمة. لدي بيانات تم ترميزها بالفعل ، ولا يتطلب الأمر سوى بعض التغييرات لربط القائمة بالبيانات. الخطوة الأخيرة هي ببساطة إضافة شريط التنقل وتضمين القائمة في عرض التنقل. انها بسيطة جدا. الآن دعونا نرى كيف تم تنفيذ كل هذا في SwiftUI.

إنشاء قائمة المعلمين

أولاً ، تحتاج إلى إنشاء طريقة عرض لعرض قائمة بجميع أعضاء الفريق ، بما في ذلك الصور الخاصة بملف التعريف الخاص بهم ووصفهم. دعونا نرى كيف يمكن القيام بذلك.

كما نرى ، يحتوي الكود الذي تم إنشاؤه على مكون نص بقيمة "Hello World". في محرر الكود ، قم بتغيير قيمة الكود إلى "Simon Ng".

struct ContentView: View { var body: some View { Text("Simon Ng") } } 

إذا كان كل شيء يعمل بشكل صحيح ، فيجب أن ترى تحديثًا تلقائيًا. هذا هو تأثير المشاهدة الفورية ، كما توقعنا.



دعنا نضيف عنصر نص جديد في التطبيق. سيكون هذا وصفًا موجزًا ​​للمشارك. لإضافة عنصر واجهة جديد في التطبيق ، تحتاج إلى النقر فوق الزر + في الزاوية اليمنى العليا. تظهر نافذة جديدة مع قائمة وجهات النظر المختلفة. قم بنقل العرض بالاسم نص ووضعه أسفل عنصر النص الأصلي ، كما هو موضح أدناه.



انتبه إلى الكود الموجود على اليسار:

 struct ContentView: View { var body: some View { VStack { Text("Simon Ng") Text("Placeholder") } } } 

قد تلاحظ أنه تمت إضافة عنصر نص جديد ضمن "طريقة عرض النص" بقيمة Simon Ng. الفرق هو أنه الآن يبدو أن هذا العرض قد لف العرض في شيء يسمى VStack. يتم استخدام VStack للمكدس الرأسي ، وهو بديل للتخطيط التلقائي في SwiftUI. إذا كانت لديك خبرة في تطوير برنامج لنظام watchOS ، فربما تعلم أنه لا توجد قيود ، علاوة على ذلك ، يتم وضع جميع العناصر في مجموعات. مع تكدس عمودي ، سيتم ترتيب جميع المشاهدات رأسيا.

الآن قم بتغيير نص "العنصر النائب" إلى "مؤسس AppCoda"

بعد ذلك ، دعونا نضيف صورة على يسار هذا النص. نظرًا لأننا نريد وضع العرض أفقيًا مع طرق العرض الحالية ، فهناك حاجة إلى التفاف VStack في HStack. للقيام بذلك ، انقر on + انقر على VStack ، ثم حدد تضمين في HStack. ألق نظرة على هذا أدناه:



يجب أن يبدو هذا الرمز كالتالي:

 struct ContentView: View { var body: some View { HStack { VStack { Text("Simon Ng") Text("Founder of AppCoda") } } } } 

لا توجد تغييرات مهمة حتى الآن ، ولكننا سنضيف الآن صورة. تغيير الرمز لتبدو هكذا:

 struct ContentView: View { var body: some View { HStack { Image(systemName: "photo") VStack { Text("Simon Ng") Text("Founder of AppCoda") } } } } 

بدءًا من iOS 13 ، تقدم Apple ميزة جديدة تسمى SFSymbols. تمثل SF Symbols ، التي طورتها شركة Apple ، مجموعة من أكثر من 1500 حرف يمكن استخدامها في التطبيقات. نظرًا لأنها يمكن أن تتكامل بسهولة مع خط نظام San Francisco ، توفر الأحرف تلقائيًا محاذاة رأسية بصرية مع نص من أي حجم. نظرًا لعدم وجود صور لمدرسينا بعد ، سنستخدم العنصر النائب المزعوم.



الآن دعونا نركز على بعض مشكلات التصميم البسيطة. نظرًا لوجود حاجة لمحاكاة مظهر UITableRow ، فلنحاذي النص إلى اليسار (أي جعله النص الرئيسي). للقيام بذلك ، انقر on + انقر على VStack وانقر فوق فحص . حدد رمز المحاذاة الأيسر كما هو موضح أدناه:



بعد ذلك ، سنرى تغييرًا في الكود. أيضا ، سيتم تغيير الرمز في الوقت الحقيقي لعرض تغييرات جديدة.

 VStack(alignment: .leading) { ... } 

الآن بعد أن عرض النص الثاني هو العنوان ، دعنا نغير الخط. كما كان من قبل ، Click + انقر على تمثيل نص "مؤسس AppCoda" في وضع المعاينة وحدد فحص. تغيير الخط إلى "عنوان فرعي" وعرض معاينة وتغيير الرمز في الوقت الحقيقي.



لنقم أيضًا بتغيير اللون وضبطه على "Gray". يجب أن يبدو هذا الرمز كالتالي:

 struct ContentView: View { var body: some View { HStack { Image(systemName: "photo") VStack(alignment: .leading) { Text("Simon Ng") Text("Founder of AppCoda") .font(.subheadline) .color(.gray) } } } } 

الآن ، بعد الانتهاء من تصميم عدد من العينات ، وصلنا إلى الجزء السحري. تعرف على مدى سهولة إنشاء قائمة. تنفيذ ⌘ + انقر على HStack وانقر فوق "تضمين في القائمة". فويلا! تعرف على كيفية تغيير الرمز تلقائيًا ، وستعرض المنطقة الفارغة 5 خطوط جديدة جميلة ، يعرض كل منها سايمون نغ كعضو في الفريق.



تأكد أيضًا من ملاحظة كيفية إنشاء القائمة في الكود. عن طريق حذف HStack واستبداله بقائمة مكررة ، تم إنشاء طريقة عرض جدول. الآن فكر في مقدار الوقت الذي قمت بحفظه والكمية الأقل من الكود الذي كتبته ، وتجنب كل هذه UITableViewDataSource ، UITableViewDelegate ، Auto Layout ، تطبيقات Dark Mode ، إلخ. كل هذا في حد ذاته يظهر قوة وقوة SwiftUI. ومع ذلك ، نحن بعيدون عن الاكتمال. دعنا نضيف بعض البيانات الحقيقية إلى القائمة الجديدة.

ربط البيانات إلى قائمة

البيانات التي نحتاجها هي قائمة بأعضاء الفريق وسيرتهم بالإضافة إلى مجلد به جميع صورهم. يمكنك تنزيل الملفات الضرورية هنا . يجب أن تجد ملفين باسماء Tutor.swif t و Tutor.xcasset s.

بعد التنزيل ، قم باستيراد الملف بامتداد Swift ومجلد الموارد إلى مشروع Xcode. لاستيرادها ، فقط اسحبها إلى متصفح المشروع.

في ملف Tutor.swif t ، نعلن عن هيكل Tutor ونجعله متوافقًا مع بروتوكول التعريف. سوف تفهم لماذا هذا مهم في وقت لاحق. نحن أيضا تحديد هوية المتغيرات ، الاسم ، العنوان ، الحيوي و imageName. أخيرًا ، أضف بعض بيانات الاختبار التي سيتم استخدامها في تطبيقنا. يحتوي Tutor.xcassets على صور لجميع أعضاء الفريق.

ارجع إلى ContentView.swift وقم بتغيير الرمز كما يلي:

 struct ContentView: View { //1 var tutors: [Tutor] = [] var body: some View { List(0..<5) { item in Image(systemName: "photo") VStack(alignment: .leading) { Text("Simon Ng") Text("Founder of AppCoda") .font(.subheadline) .color(.gray) } } } } #if DEBUG struct ContentView_Previews : PreviewProvider { static var previews: some View { //2 ContentView(tutors: testData) } } #endif 

كل شيء بسيط جدا:

1. حدد متغيرًا جديدًا يسمى المدربين ، وهو عبارة عن مجموعة فارغة من هياكل المعلم.
2. نظرًا لأننا نقوم بتعريف متغير جديد لهيكل ContentView ، لذلك ، يجب عليك أيضًا تعديل ContentView_Previews لعرض هذا التغيير. تعيين المعلمة المعلمون إلى testData.

لن تكون هناك تغييرات في المعاينة ، لأننا لا نستخدم بيانات الاختبار بعد. لعرض بيانات الاختبار ، قم بتغيير الكود كما يلي:

 struct ContentView: View { var tutors: [Tutor] = [] var body: some View { List(tutors) { tutor in Image(tutor.imageName) VStack(alignment: .leading) { Text(tutor.name) Text(tutor.headline) .font(.subheadline) .color(.gray) } } } } 

تأكد من استخدام ContentView للمعلمين لعرض البيانات على الشاشة.

ها أنت ذا! انظر كيف تغيرت طريقة العرض.



يتم عرض الصور كمربع. أود أن تبدو أكثر تقريبًا. لنرى كيف يمكننا عمل صورة بزوايا مستديرة. في الركن الأيمن العلوي ، انقر فوق الزر + وانتقل إلى علامة التبويب الثانية. سيؤدي ذلك إلى عرض قائمة بمعدلات التنسيق التي يمكنك إضافتها إلى الصور.



ابحث عن Corner Radius ، واسحبه من نافذة المعاينة ووضعه على الصورة. يجب أن ترى الرمز الذي تم تغييره ، وسيتم تغيير صورة المعاينة إلى ما يلي.



ومع ذلك ، فإن نصف قطر المنحنى 3 صغير جدًا. لذلك ، قم بتغييره إلى 40. وهكذا ، نحصل على صور مقربة جميلة.



الخلية والقائمة جاهزة! بعد ذلك ، تحتاج إلى عرض معلومات مفصلة عندما ينقر المستخدم على الخلية. لنبدأ بإنشاء التنقل.

إنشاء الملاحة

يلف عرض التنقل العرض الموجود في شريط التنقل ووحدة التحكم في التنقل. من المفترض أنك على دراية بلوحة العمل بالفعل ، وأنت تعلم أنه من السهل جدًا تضمين العرض في واجهة التنقل. كل ما عليك فعله هو مجرد بضع نقرات.

في SwiftUI ، يعد التفاف طريقة عرض قائمة في طريقة عرض NavigationView بسيطًا أيضًا. كل ما عليك فعله هو تغيير الكود كما يلي:

 ... var body : some View { NavigationView { List(tutors) { tutor in ... } } } ... 

يجب عليك التفاف رمز القائمة في NavigationView. افتراضيًا ، لا يكون لشريط التنقل عنوان. يجب أن تنقل المعاينة القائمة لأسفل ، تاركة فجوة كبيرة في المنتصف. هذا لأننا لم نحدد عنوانًا لشريط التنقل. لإصلاح ذلك ، تحتاج إلى تعيين الرأس بإضافة سطر التعليمات البرمجية التالي (على سبيل المثال .navigationBarTitle):

 ... var body : some View { NavigationView { List(tutors) { tutor in ... } .navigationBarTitle(Text("Tutors")) } } ... 

الآن يجب أن تبدو الشاشة بشيء من هذا القبيل:



بعد ذلك ، اضبط زر التنقل. NavigationButton يؤدي إلى شاشة جديدة ، والتي هي في مكدس التنقل. تمامًا كما لفنا القائمة في NavigationView ، نحتاج إلى التفاف محتويات القائمة مع NavigationButton ، كما هو موضح أدناه:

 ... var body : some View { NavigationView { List(tutors) { tutor in NavigationButton(destination: Text(tutor.name)) { Image(tutor.imageName) VStack(alignment: .leading) { Text(tutor.name) Text(tutor.headline) .font(.subheadline) .color(.gray) } } } .navigationBarTitle(Text("Tutors")) } } ... 

يتم الآن عرض اسم عضو الفريق في عرض تفصيلي. الآن هو الوقت المناسب للتحقق من ذلك.

في وضع المعاينة الحالي ، لا يمكنك التفاعل مع العرض. عادة ، عند النقر فوق معاينة ، يحدث مجموعة بسيطة من التعليمات البرمجية. لتشغيل الاختبار والتحقق من التفاعل مع واجهة المستخدم ، يجب النقر فوق زر التشغيل في الزاوية اليمنى السفلى.



ستصبح المشاهدة مظلمة ، وقد تضطر إلى الانتظار بضع ثوانٍ حتى يتم تحميل المحاكاة بالكامل قبل أن يصبح من الممكن التفاعل مع المشاهدات.



عند انتهاء التنزيل ، يمكنك النقر فوق الخلية ، وسيتم الانتقال إلى طريقة عرض جديدة في المجموعة ، حيث سيتم عرض اسم الخلية المحددة.



قبل الانتقال إلى تطبيق عرض تفصيلي ، اسمح لي بعرض تقنية صعبة تساعدك في جعل الشفرة أكثر وضوحًا. Click + انقر على زر تنقل وحدد "Extract Subview".

بوم! يمكنك أن ترى أنه تم إنشاء جميع الشفرة في NavigationButton في بنية جديدة تمامًا ، مما يجعلها واضحة تمامًا. إعادة تسمية ExtractedView إلى TutorCell.

الآن يمكنك الحصول على الخطأ في TutorCell. هذا لأنه ليس لدينا معلمة المعلم لتمريرها إلى هذا الهيكل. تصحيح الخطأ بسيط جدا. أضف ثابتًا جديدًا إلى هيكل TutorCell كما يلي:

 struct TutorCell: View { let tutor: Tutor var body: some View { ... } } 

وفي ContentView ، أضف المعلمة المفقودة عن طريق تغيير الخط إلى:

 ... List(tutors) { tutor in TutorCell(tutor: tutor) }.navigationBarTitle(Text("Tutors")) ... 

هذا كل شئ! هناك قائمة وخلايا ، كلها مدروسة جيدًا وترتيبها بالترتيب المطلوب! بعد ذلك ، سننشئ طريقة عرض تفصيلية تعرض جميع المعلومات المتعلقة بالمعلم.

إنشاء طريقة عرض لعرض معلومات مفصلة.

لنقم بإنشاء ملف جديد بالانتقال إلى ملف> جديد> ملف. ضمن iOS ، حدد SwiftUI View وقم بتسمية هذا الملف TutorDetail .



في المعاينة ، تم بالفعل إنشاء العرض الأساسي الأساسي. دعنا نعمل معه. أولاً ، انقر على زر + ووضع الصورة على عرض النص المدمج بالفعل. اضبط اسم الصورة على "Simon Ng." يجب أن تظهر صورة لسيمون. الآن قم بتغيير الكود كما هو موضح أدناه:

 struct TutorDetail: View { var body: some View { //1 VStack { //2 Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) //3 Text("Simon Ng") .font(.title) } } } 

بشكل عام ، هذا الرمز واضح بما فيه الكفاية ، ولكن إذا كنت بحاجة إلى توضيح ، فلا تقلق. هنا ما يحدث:

1. أولاً ، نقوم بتعبئة جميع وجهات نظرنا في كومة رأسية. هذا أمر بالغ الأهمية لتخطيط التصميم الذي سنعتمده.
2. ثم نأخذ صورة سيمون وننشطها. أولاً ، قم بتعيين مقاطع الصور في شكل دائرة. بدلاً من ضبط الركن radius ، إنه أكثر فاعلية لأن الدائرة يمكن أن تتكيف مع أحجام صور مختلفة. نضيف تراكب دائرة بإطار أبيض يوفر إطار برتقالي جميل. أخيرًا ، سنضيف ظلًا خفيفًا لتوفير بعض عمق الصورة.
3. يعين السطر الأخير من الشفرة خط اسم المعلم إلى خط العنوان.

تحتاج أيضًا إلى إضافة عرضي نص آخرين: العنوان والحيوية. اسحب عرض النصين أسفل عرض النص باسم المعلم ، وقم بتحريرهما:

 struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title) Text("Founder of AppCoda") Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") } } } 

والخبر السار هو أن لدينا عرض النص. الأخبار السيئة هي أنها تبدو سيئة ولا تظهر الفرق بين العنوان والوصف التفصيلي. بالإضافة إلى ذلك ، لا يعرض طريقة عرض نص السيرة النص بالكامل. دعونا إصلاحه.

قم بتحديث الكود كما يلي:

 struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title) //1 Text("Founder of AppCoda") .font(.subheadline) //2 Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") .font(.headline) .multilineTextAlignment(.center) } } } 

1. أولاً ، نقوم بتثبيت "مؤسس AppCoda" بخط العنوان الفرعي.
2. بنفس الطريقة ، قمنا بتعيين تمثيل نص السيرة باستخدام خط العنوان. سنقوم أيضًا بمحاذاة النص بالسطر .multilineTextAlignment (.center)

دعونا إصلاح الخطأ التالي. نحن بحاجة إلى عرض النص الكامل للتمثيل النصي للسيرة الذاتية. يمكن القيام بذلك بسهولة عن طريق إضافة سطر جديد من التعليمات البرمجية:

 ... Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") .font(.headline) .multilineTextAlignment(.center) .lineLimit(50) ... 

كل شيء يبدو جيدا. هناك تغيير واحد آخر في التصميم أرغب في إجراؤه. العنوان الرئيسي والتمثيل النصي للسيرة الذاتية قريبان جدًا من بعضهما البعض. أود الحصول على مساحة بين هذين الرأيين. بالإضافة إلى ذلك ، أود أن أضيف بعض المسافة البادئة إلى كل الالتواء حتى لا تلمس حواف الجهاز. تأكد من تغيير الكود كما يلي:

 struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title) Text("Founder of AppCoda") .font(.subheadline) //1 Divider() Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") .font(.headline) .multilineTextAlignment(.center) .lineLimit(50) //2 }.padding() } } 

هنا نجري بعض التغييرات:

1. تعد إضافة فاصل سهلة مثل استدعاء Divider ()
2. لإضافة وسادة إلى المكدس العمودي بالكامل ، يجب عليك الاتصال بـ. padding () في نهاية إعلان VStack.

هذا كل شئ! تهانينا! شاشة العرض التفصيلية جاهزة. يبقى فقط لربط قائمة المعلمين وصفهم التفصيلي. انها بسيطة جدا.

نقل البيانات

لنقل البيانات ، تحتاج إلى إعلان بعض المعلمات في بنية TutorDetail . قبل التصريح عن متغير نص ، أضف المتغيرات التالية:

 var name: String var headline: String var bio: String var body: some View { ... } 

هذه هي المعلمات التي سنمررها من ContentView. قم بإجراء التغييرات التالية:

 ... var body: some View { VStack { // 1 Image(name) .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) //2 Text(name) .font(.title) //3 Text(headline) .font(.subheadline) Divider() //4 Text(bio) .font(.headline) .multilineTextAlignment(.center) .lineLimit(50) //5 }.padding().navigationBarTitle(Text(name), displayMode: .inline) } ... 

1. استبدل اسم المعلم بالصورة باسم المتغير
2. استبدال نص العنوان مع متغير العنوان
3. أخيرًا ، استبدل الفقرة الطويلة من النص بالمتغير الحيوي
4. تمت إضافة سطر من التعليمات البرمجية التي تحدد عنوان شريط التنقل إلى اسم المعلم.

أخيرًا وليس آخرًا ، نحتاج إلى إضافة المعلمات المفقودة إلى بنية TutorDetail_Previews.

 #if DEBUG struct TutorDetail_Previews : PreviewProvider { static var previews: some View { TutorDetail(name: "Simon Ng", headline: "Founder of AppCoda", bio: "Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") } } #endif 

في الكود أعلاه ، نضيف المعلمات المفقودة ونملأ المعلومات بالمعلومات التي كانت لدينا من قبل.

قد تتساءل عما حدث مع تعليمات #if DEBUG / # endif . هذا يعني أنه لن يتم تنفيذ أي تعليمات برمجية مضمنة في هذه الأوامر إلا عند معاينتها لأغراض التصحيح. في تطبيقك الأخير لن يكون هذا.

لا شيء يجب أن يتغير ، لأن المعلومات لم تتغير أيضًا.



وهكذا ، فإن الخطوة الأخيرة هي ربط هذا الرأي بالقائمة. قم بالتبديل إلى ملف ContentView.swift. كل ما عليك القيام به هو تغيير سطر واحد من التعليمات البرمجية في بنية TutorCell. قم بتغيير رمز NavigationButton إلى أدناه:

 ... var body: some View { return NavigationButton(destination: TutorDetail(name: tutor.name, headline: tutor.headline, bio: tutor.bio)) { ... } } ... 

بدلاً من عرض طريقة العرض باسم المعلم ، تحتاج إلى تغيير الوجهة إلى TutorDetail عند ملء البيانات ذات الصلة. يجب أن يبدو هذا الرمز كالتالي:



انقر فوق زر التشغيل والتفاعل مع طريقة العرض. إذا كان كل شيء يعمل بشكل جيد ، فسيعمل التطبيق أيضًا بشكل جيد.

ما عليك سوى اختيار أحد إدخالات الأعضاء:



وبعد ذلك سيتم عرض تفاصيل المشارك على الشاشة التفصيلية.

استنتاج

يقدم هذا المقال أساسيات SwiftUI. الآن سيكون من المناسب إنشاء تطبيقات بسيطة ، مثل جدولة المهام ، إلخ. أقترح إلقاء نظرة على بعض الموارد أدناه ، مثل وثائق Apple وجلسات WWDC 2019 في هذا الإطار.

وثائق SwiftUI
SwiftUI التعليمية
تقديم SwiftUI: بناء التطبيق الأول الخاص بك
SwiftUI أساسيات

هذا الإطار هو مستقبل Apple ، لذلك سيكون رائعًا إذا بدأت به. تذكر أنه إذا لم تكن متأكدًا من الكود ، فحاول التعامل مع المعاينات التلقائية ومعرفة ما إذا كان يمكنك إجراء تغييرات على واجهة المستخدم مباشرة لمعرفة كيفية إنشاء الكود. إذا كان لديك أي أسئلة ، فلا تتردد في طرحها في التعليقات أدناه.

للإشارة ، يمكنك تنزيل المشروع النهائي هنا .