نسخة مستنسخة من Instagram باستخدام SwiftUI و GraphQL – ProfileView

اليوم في الجزء الثالث من تطبيق استنساخ Instagram مع GraphQL سنتعمق أكثر في SwiftUI، وبناء طريقة عرض الملف الشخصي.

سنتعلم إعادة استخدام الهياكل في SwiftUI وسنناقش بعض عناصر التحكم: VStack، و HStack، و GeometryReader، والنص، والزر، والفاصل، والصورة، والمقسم وغيرها.

في مقالاتنا السابقة، تعلمنا في مقالاتنا السابقة كيفية تسجيل مستخدم وكيفية تسجيل دخول مستخدم، مع واجهات المستخدم الخاصة بكل منها في تطبيقنا المستنسخ من Instagram. اليوم سنجعلها أجمل بكثير.

اربطوا أحزمة الأمان ودعونا نبدأ!

لتعلم أفضل، قم بتحميل مشروع استنساخ Instagram iOS مع التعليمات البرمجية المصدرية.

هل تريد بداية سريعة؟

استنسخ هذا التطبيق من مركزنا وابدأ باستخدامه دون أي متاعب!

ما الذي سنقوم ببنائه بالضبط

سنقوم ببناء العرض التالي:

تجعل SwiftUI من السهل حقًا بناء مثل هذه الواجهات المعقدة حيث يمكنك إعادة استخدام الكثير من المكونات بسهولة ومباشرة.

الشيء الوحيد هو أننا يجب أن نتعلم كيفية إنشاء تلك المكونات القابلة لإعادة الاستخدام. هذا المنظر الواحد هو في الواقع مزيج من عدة مناظر تتكامل في نتيجة نهائية واحدة.
قائمة مبسطة من المكونات هي كالتالي:

أين

• VStack
• Hstack
• عناصر التحكم الفعلية (أزرار، فواصل، إلخ)

HStack، Vstack، Zstack ماذا؟

يبني SwiftUI واجهات المستخدم الخاصة به عن طريق محاذاة طرق العرض عموديًا باستخدام VStack (مكدس عمودي) وأفقيًا باستخدام HStack (مكدس أفقي) وتراكب طرق العرض مع Zstack (Z كما في Z-index).

في كل مرة تحتاج إلى طريقة عرض تحت طريقة عرض أخرى، يجب عليك استخدام VStack.

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

في كل مرة تحتاج فيها إلى طريقة عرض تراكب طريقة عرض أخرى، يجب عليك استخدام ZStack.

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

يسمح لنا بتصيير كل شيء كدالة لحجمه (GeometryReader) وإحداثياته.

قابلية إعادة الاستخدام

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

بالنسبة لهذا التطبيق، هناك مكونان أساسيان سنعيد استخدامهما في طرق عرض مختلفة: الخط الزمني والشريط السفلي:

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

لنبدأ إذن…

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

أضف ملف SwiftUI جديد وأسمه ProfileView.swift.

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

هيكل ProfileView: منظر {
    متغير الجسم: طريقة عرض ما {
        GeometryReader { هندسة في
            
        }
    }
}

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

هيكل ProfileView: طريقة عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack{
                
            }
        }
    }
}

وسيكون أول “سطر” من عناصر التحكم لدينا هو السطر العلوي:

ما يبدو وكأنه سطر بسيط من عناصر التحكم هو في الواقع عناصر تحكم متعددة:

• نص “اسم المستخدم”
• السهم الصغير الذي يشير إلى الأسفل بجانبه
• فاصل لملء الفراغ بين هذا السهم الصغير وعناصر التحكم التالية
• زر همبرغر على اليمين

سنستخدم أيقونات للأزرار، لذا تأكد من العثور على بعض الأيقونات المجانية. مكان جيد للعثور عليها هو Freepik.

لذا، دعنا نضيف HStack الخاص بنا:

هيكلة ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        GeometryReader { هندسة في
            VStack{
                HStack{
                    
                }
            }
        }
    }
}

وفيه نصنا الأول

هيكلة عرض الملف الشخصي: طريقة عرض {
    متغير الجسم: طريقة عرض ما {
        GeometryReader { هندسة في
            VStack{
                HStack{
                    نص("اسم المستخدم")
                }
            }
        }
    }
}

حتى الآن ربما أوصلك ذلك إلى هذا:

حسنًا. إنها بداية.

دعنا نحاذيها إلى الجانب الأيسر بإضافة

(محاذاة: .رائد)

إلى VStack الخاص بنا:

هيكل ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                }
            }
        }
    }
}

يمكننا أيضًا إضافة بعض خصائص النص لجعله أكثر اتساقًا مع تصميمنا:

لتعيين لونه إلى اللون الأزرق الفاتح الخاص بنا والذي تم تعريفه في AppDelegate الخاص بنا:

.foregroundColor(lightBlueColor)

لتغيير وزن الخط:

.fontWeight(.semibold)

وأخيرًا لإضافة بعض الحشو (مسافة) في الجانب البادئ:

.padding(.leading, 10)

ويجب أن تبدو شفرتك الآن هكذا

هيكل ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                    .fontWeight(.semibold)
                    .padding(.leading, 10)
                }
            }
        }
    }
}

ويجب أن تبدو واجهة المستخدم الخاصة بك هكذا:

الآن دعنا نضيف زر السهم الصغير.

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

الزر(الإجراء: {}) {
    
}

ونضيف صورتنا فيه:

زر(الإجراء: {}){
    صورة("سهم لأسفل")
    .يمكن تغيير حجمها()
    .إطار(العرض: 10، الارتفاع: 10)
}

وللتنسيق فقط، دعنا نضيف بعض الحشو في الأعلى:

زر(الإجراء: {}) {
    صورة("سهم لأسفل")
    قابل للتحجيم()
    إطار(العرض: 10، الارتفاع: 10)
}
.الحشو(.أعلى، 5)

يجب أن تكون شفرتنا الكاملة الآن هكذا

الهيكل ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                    .fontWeight(.semibold)
                    .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                }
            }
        }
    }
}

وواجهة المستخدم الخاصة بنا:

الآن دعنا نضيف زر الهامبرغر بنفس الطريقة:

زر(الإجراء: {}) {
    صورة("قائمة")
    قابل للتحجيم()
    .إطار(العرض: 20، الارتفاع: 20)
}.padding()

كودنا الكامل

هيكلة عرض الملف الشخصي: عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                    .fontWeight(.semibold)
                    .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        .قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.padding()
                }
            }
        }
    }
}

ومنظرنا:

لو كان هناك فقط شيء يمكننا وضعه بين هذين الزرين ليأخذ كل المسافة بينهما ويجعل كل شيء متناسقًا…

فاصل()

الآن يبدو جيدًا!

شيفرتنا الكاملة حتى الآن

الهيكل ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                    .fontWeight(.semibold)
                    .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    فاصل()
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.padding()
                }
            }
        }
    }
}

والآن دعونا فقط نصلح ارتفاع HStack ونعطيه بعض الحشو على الجانب الأمامي، ونحن على ما يرام:

.إطار (الارتفاع: 50)
.الحشو(.leading، 10)

الشيفرة الكاملة:

هيكلة بروفايل فيو: طريقة عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                    .fontWeight(.semibold)
                    .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    فاصل()
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.حشوة()
                }.frame(الارتفاع: 50)
                .الحشو(.رائد، 10)
            }
        }
    }
}

يمكننا الآن بدء تشغيل

HStack الثاني

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

لذا حان الوقت لإنشاء HStack الثاني وبناء الجزء الثاني من شاشتنا:

سيكون هذا أيضًا HStack، ويحتوي على 4 VStacks بداخله: واحد للصورة والنص تحتها، و3 للأرقام مع النص تحتها.

بما أنك على الأرجح فهمت المفهوم الآن، سأدع الشيفرة الكاملة لـ HStack الجديد هذا:

HStack{
    VStack{
        صورة("شعار-اجتماعي")
        .قابل للتحجيم()
        .إطار(العرض: 90، الارتفاع: 90)
            .clipShape(دائرة()))
            .ظل(نصف القطر: 3)
            .overlay(Circle().stroke(Color.pink, lineWidth: 1))
        
        نص("اسمك")
            .foregroundColor(lightBlueColor)
            .fontWeight(.semibold)
    }.padding(.leading، 10)
    
    VStack{
        نص("10")
        .font(.system(size: 30)))
        .ForegroundColor(lightBlueColor)
        .fontWeight(.bold)
        
        نص("منشورات")
        .font(.system(size: 13)))
        .foregroundColor(lightBlueColor)
    .padding(.leading، 30)
    
    VStack{
        نص("100")
        .font(.system(size: 30)))
        .foregroundColor(lightBlueColor)
        .fontWeight(.bold)
        
        نص("متابعون")
        .font(.system(size: 13)))
        .foregroundColor(lightBlueColor)
    .حشوة()
    
    VStack{
        نص("1000")
        .font(.system(size: 30)))
        .ForegroundColor(lightBlueColor)
        .fontWeight(.bold)
        
        نص("التالي")
        .font(.system(size: 13)))
        .foregroundColor(lightBlueColor)
    }
    
}.frame(الارتفاع: 100)
.الحشو(.رائد، 10)

وستكون شفرتنا الكاملة

هيكلة ProfileView: طريقة عرض {
    متغير الجسم: طريقة عرض ما {
        GeometryReader { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                        .fontWeight(.semibold)
                        .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    فاصل()
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.padding()
                    
                }.frame(الارتفاع: 50)
                .الحشو(.رائد، 10)
                
                HStack{
                    VStack{
                        صورة("شعار-اجتماعي")
                        .قابل لتغيير الحجم()
                        .إطار(العرض: 90، الارتفاع: 90)
                            .clipShape(دائرة()))
                            .ظل(نصف القطر: 3)
                            .overlay(Circle().stroke(Color.pink, lineWidth: 1))
                        
                        نص("اسمك")
                            .foregroundColor(lightBlueColor)
                            .fontWeight(.semibold)
                    }.padding(.leading، 10)
                    
                    VStack{
                        نص("10")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("منشورات")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .padding(.leading، 30)
                    
                    VStack{
                        نص("100")
                        .font(.system(size: 30)))
                        .foregroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("متابعون")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .حشوة()
                    
                    VStack{
                        نص("1000")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("التالي")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    }
                    
                }.frame(الارتفاع: 100)
                .الحشو(.رائد، 10)
            }
        }
    }
}

لذا سيبدو منظرنا هكذا:

أنيق!

إضافة زر تحرير الملف الشخصي والمقسم الخاص بنا

قد يميل المرء إلى الاعتقاد بأن زر تحرير الملف الشخصي والمقسم الموجود أسفله يجب أن يكونا في VStack:

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

 زر(الإجراء: {}) {
    نص("تعديل الملف الشخصي")
    .fontWeight(.bold)
    .foregroundColor(lightBlueColor)
.frame(العرض: 400)
.الحشو()

مقسم()

سيبدو هكذا

هيكل ProfileView: طريقة عرض {
    متغير الجسم: طريقة عرض ما {
        قارئ هندسي { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                        .fontWeight(.semibold)
                        .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    فاصل()
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.padding()
                    
                }.frame(الارتفاع: 50)
                .الحشو(.رائد، 10)
                
                HStack{
                    VStack{
                        صورة("شعار-اجتماعي")
                        .قابل لتغيير الحجم()
                        .إطار(العرض: 90، الارتفاع: 90)
                            .clipShape(دائرة()))
                            .ظل(نصف القطر: 3)
                            .overlay(Circle().stroke(Color.pink, lineWidth: 1))
                        
                        نص("اسمك")
                            .foregroundColor(lightBlueColor)
                            .fontWeight(.semibold)
                    }.padding(.leading، 10)
                    
                    VStack{
                        نص("10")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("منشورات")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .padding(.leading، 30)
                    
                    VStack{
                        نص("100")
                        .font(.system(size: 30)))
                        .foregroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("متابعون")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .حشوة()
                    
                    VStack{
                        نص("1000")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("التالي")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    }
                    
                }.frame(الارتفاع: 100)
                .الحشو(.رائد، 10)
                
                زر(الإجراء: {}){
                    نص("تعديل الملف الشخصي")
                    .fontWeight(.bold)
                    .foregroundColor(lightBlueColor)
                .frame(العرض: 400)
                .الحشو()
                
                مقسم()
            }
        }
    }
}

وواجهة المستخدم الخاصة بنا:

محاكاة خطنا الزمني

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

أنشئ ملف TimelineView.swift.

هناك العديد من الطرق المختلفة لعرض البيانات في SwiftUI، ولكنني اخترت هذه الطريقة للتطبيق الخاص بي:

• عرض الخط الزمني الخاص بنا هو VStack من LineViews
• كل LineView هو عبارة عن HStack مكون من 3 معاينات معاينة
• تحتوي كل طريقة عرض معاينة على صورة فيها

أول شيء سأفعله هو إنشاء بنية لحفظ بياناتنا. سأسمي هذه البنية معاينة وستحتوي على معلمتين: معرف (نوع Int) للتكرار وصورةURL (نوع String) التي ستحتوي على عنوان URL للصورة التي سأمررها:

بنية معاينة {
    معرف متغير: Int
    دع imageUrl: سلسلة
}

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

هيكلة معاينة المعاينة: معاينة {
    دع المعاينة: معاينة
    
    متغير الجسم: طريقة عرض ما {
        صورة(معاينة.imageUrl)
        قابل للتحجيم()
        .إطار(العرض: 136، الارتفاع: 136)
    }
}

بعد الانتهاء من ذلك، يمكننا إضافة البنية الخاصة بـ LineView، والتي تستقبل مصفوفة من 3 معاينات لعرضها في الخط.
سأقوم بتغيير ذلك في المستقبل ليعكس البيانات الحقيقية، ولكن في الوقت الحالي، سيكون الأمر على ما يرام:

هيكلة LineView: عرض {
    دع معاينة المصفوفة:[معاينة]
    
    متغير الجسم: طريقة عرض ما {
        HStack(تباعد: 2){ {
            طريقة عرض المعاينة(معاينة(معاينة: معاينة صفيف المعاينة[0])
            طريقة عرض المعاينة(المعاينة: معاينة صفيف المعاينة[1])
            طريقة عرض المعاينة(المعاينة: معاينة صفيف المعاينة[2])
        }
    }
}

أخيرًا، يمكننا إنشاء مصفوفة من كائنات المعاينة التي سنقوم بتكرارها:

دع المعاينات:[معاينة] = [
    معاينة(المعرف: 0، imageUrl: "1"),
    معاينة(المعرف: 1، imageUrl: "2"),
    معاينة(المعرف: 2، imageUrl: "3"),
    معاينة(المعرف: 3، imageUrl: "4")، معاينة(المعرف: 3، imageUrl: "4"),
    معاينة(المعرف: 4، imageUrl: "5")، معاينة(المعرف: 4، imageUrl: "5"),
    معاينة(المعرف: 5، imageUrl: "6")، معاينة(المعرف: 5، imageUrl: "6"),
    معاينة(المعرف: 6، imageUrl: "7")، معاينة(المعرف: 6، imageUrl: "7"),
    معاينة(المعرف: 7، imageUrl: "8")، معاينة(المعرف: 7، imageUrl: "8"),
    معاينة(المعرف: 8، imageUrl: "9")، معاينة(المعرف: 8، imageUrl: "9"),
    معاينة(المعرف: 9، imageUrl: "10")، معاينة(المعرف: 9، imageUrl: "10"),
    معاينة(المعرف: 10، imageUrl: "11")، معاينة(المعرف: 10، imageUrl: "11"),
    معاينة(المعرف: 11، imageUrl: "12")، معاينة(المعرف: 11، imageUrl: "12"),
    معاينة(المعرف: 12، imageUrl: "13")، معاينة(المعرف: 12، imageUrl: "13")
]

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

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

متغير الجسم: بعض طريقة العرض {
        ScrollView{
            VStack(محاذاة: .leading, spacing: 2){
                ForEach(معاينات، معرف: \.id) { معاينة في
                    LineView(معاينة عرض(معاينة صفيف: [معاينة، معاينة، معاينة])
                }
            }
        }
}

لذا فإن شفرتنا الكاملة ستكون شيئًا من هذا القبيل:

هيكل TimelineView: عرض {
    
    دع المعاينات:[معاينة] = [
        معاينة(المعرف: 0، imageUrl: "1"),
        معاينة(المعرف: 1، imageUrl: "2"),
        معاينة(المعرف: 2، imageUrl: "3"),
        معاينة(المعرف: 3، imageUrl: "4")، معاينة(المعرف: 3، imageUrl: "4"),
        معاينة(المعرف: 4، imageUrl: "5")، معاينة(المعرف: 4، imageUrl: "5"),
        معاينة(المعرف: 5، imageUrl: "6")، معاينة(المعرف: 5، imageUrl: "6"),
        معاينة(المعرف: 6، imageUrl: "7")، معاينة(المعرف: 6، imageUrl: "7"),
        معاينة(المعرف: 7، imageUrl: "8")، معاينة(المعرف: 7، imageUrl: "8"),
        معاينة(المعرف: 8، imageUrl: "9")، معاينة(المعرف: 8، imageUrl: "9"),
        معاينة(المعرف: 9، imageUrl: "10")، معاينة(المعرف: 9، imageUrl: "10"),
        معاينة(المعرف: 10، imageUrl: "11")، معاينة(المعرف: 10، imageUrl: "11"),
        معاينة(المعرف: 11، imageUrl: "12")، معاينة(المعرف: 11، imageUrl: "12"),
        معاينة(المعرف: 12، imageUrl: "13")، معاينة(المعرف: 12، imageUrl: "13")
    ]
    
    var body: بعض طريقة العرض {
            عرض التمرير{
                VStack(محاذاة: .رائد، تباعد: 2){ {
                    ForEach(المعاينات، المعرف: \.id) { معاينة في
                        LineView(معاينة صفيف المعاينة: [معاينة، معاينة، معاينة])
                    }
                }
            }
    }
}

هيكل TimelineView_Previews: موفر المعاينة {
    معاينات متغير ثابت: بعض المعاينات {
        عرض الخط الزمني()
    }
}

هيكل المعاينة {
    معرف متغير: Int
    دع imageUrl: سلسلة
}

هيكل LineView: طريقة عرض {
    دع معاينة صفيف المعاينة:[معاينة]
    
    متغير الجسم: طريقة عرض ما {
        HStack(تباعد: 2){ {
            طريقة عرض المعاينة(معاينة(معاينة: معاينة صفيف المعاينة[0])
            طريقة عرض المعاينة(المعاينة: معاينة صفيف المعاينة[1])
            طريقة عرض المعاينة(المعاينة: معاينة صفيف المعاينة[2])
        }
    }
}

هيكل معاينة المعاينة: عرض {معاينة {
    
    دع المعاينة: معاينة
    
    متغير الجسم: طريقة عرض ما {
        صورة(معاينة.imageUrl)
        قابل للتحجيم()
        .إطار(العرض: 136، الارتفاع: 136)
    }
}

وإذا استدعيناها من ProfileView.swift الخاص بنا تحت المقسّم مباشرةً

...
 زر(الإجراء: {}){
    نص("تعديل الملف الشخصي")
    .fontWeight(.bold)
    .foregroundColor(lightBlueColor)
.frame(العرض: 400)
.الحشو()

مقسم()

الخط الزمني للعرض().الحشو(.رائد، 10)

...

يمكننا أيضًا إضافة مقسم آخر أسفله مباشرةً حتى نحصل على النتيجة النهائية التي نريدها تقريبًا:

...
 زر(الإجراء: {}){
    نص("تعديل الملف الشخصي")
    .fontWeight(.bold)
    .foregroundColor(lightBlueColor)
.frame(العرض: 400)
.الحشو()

مقسم()

الخط الزمني للعرض().الحشو(.رائد، 10)

مقسِّم()

...

كيف تبدو؟

هل تبدو جميلة بالفعل؟

دعنا ننهيه بإضافة …

المنظر السفلي

سيكون المنظر السفلي ملفًا آخر، حيث سنستخدمه في أجزاء متعددة من التطبيق.

أنشئ ملف BottomView.swift الخاص بك وأنشئ فيه HStack (حيث ستكون الأزرار جنبًا إلى جنب) من 4 أزرار مع فواصل بينها. لا تنسى الأيقونات!

هيكل BottomView: منظر {
    متغير الجسم: طريقة عرض ما {
        HStack{
             زر(الإجراء: {}){
                 صورة("الصفحة الرئيسية")
                 .قابل للتحجيم()
                 .إطار(العرض: 30، الارتفاع: 30)
             }.padding()
             
             فاصل()
             
             زر(الإجراء: {}){
                 صورة("بحث")
                 قابل للتحجيم()
                 .frame(العرض: 30، الارتفاع: 30)
             }.padding()
             
             فاصل()
             
             زر(الإجراء: {}){
                 صورة("زر زائد")
                 قابل للتحجيم()
                 .إطار(العرض: 30، الارتفاع: 30)
             }.padding()
             
             فاصل()
             
             زر(الإجراء: {}){
                 صورة("قلب")
                 قابل للتحجيم()
                 .إطار(العرض: 30، الارتفاع: 30)
             }.padding()
             
             فاصل()
             
             زر(الإجراء: {}){
                 صورة("المستخدم")
                 قابل للتحجيم()
                 .إطار(العرض: 30، الارتفاع: 30)
             }.padding()
        }.frame(الارتفاع: 35)
    }
}

كان هذا سهلًا! دعنا ندمجه في ProfileView.swift الخاص بنا، أسفل المقسم الأخير مباشرةً:

...
مقسِّم()
                
TimelineView().padding(.leading، 10)
                
مقسِّم()
                
المنظر السفلي()
...

إذًا ستكون شيفرتنا الكاملة لـ ProfileView هي

استيراد SwiftUI

بنية ProfileView: عرض {
    متغير الجسم: طريقة عرض ما {
        GeometryReader { هندسة في
            VStack(محاذاة: .رائد) {
                HStack{
                    نص("اسم المستخدم")
                    .foregroundColor(lightBlueColor)
                        .fontWeight(.semibold)
                        .padding(.leading, 10)
                    
                    زر(الإجراء: {}){
                        صورة("سهم لأسفل")
                        .قابل للتحجيم()
                        .إطار(العرض: 10، الارتفاع: 10)
                    }
                    .الحشو(.أعلى، 5)
                    
                    فاصل()
                    
                    زر(الإجراء: {}){
                        صورة("قائمة")
                        قابل للتحجيم()
                        .إطار(العرض: 20، الارتفاع: 20)
                    }.padding()
                    
                }.frame(الارتفاع: 50)
                .الحشو(.رائد، 10)
                
                HStack{
                    VStack{
                        صورة("شعار-اجتماعي")
                        .قابل لتغيير الحجم()
                        .إطار(العرض: 90، الارتفاع: 90)
                            .clipShape(دائرة()))
                            .ظل(نصف القطر: 3)
                            .overlay(Circle().stroke(Color.pink, lineWidth: 1))
                        
                        نص("اسمك")
                            .foregroundColor(lightBlueColor)
                            .fontWeight(.semibold)
                    }.padding(.leading، 10)
                    
                    VStack{
                        نص("10")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("منشورات")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .padding(.leading، 30)
                    
                    VStack{
                        نص("100")
                        .font(.system(size: 30)))
                        .foregroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("متابعون")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    .حشوة()
                    
                    VStack{
                        نص("1000")
                        .font(.system(size: 30)))
                        .ForegroundColor(lightBlueColor)
                        .fontWeight(.bold)
                        
                        نص("التالي")
                        .font(.system(size: 13)))
                        .foregroundColor(lightBlueColor)
                    }
                    
                }.frame(الارتفاع: 100)
                .الحشو(.رائد، 10)
                
                زر(الإجراء: {}){
                    نص("تعديل الملف الشخصي")
                    .fontWeight(.bold)
                    .foregroundColor(lightBlueColor)
                .frame(العرض: 400)
                .الحشو()
                
                مقسم()
                
                الخط الزمني للعرض().الحشو(.رائد، 10)
                
                مقسِّم()
                
                المنظر السفلي()
            }
        }
    }
}

هيكل ProfileView_Previews_Previews: موفر المعاينة {
    معاينات متغيرة ثابتة: بعض المعاينات {
        عرض الملف الشخصي()
    }
}

وأخيرًا…

لدينا طريقة عرض الملف الشخصي الكاملة:

والآن، كم كان ذلك رائعاً!

خاتمة

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

لقد تعلمت كيفية إنشاء مكونات في SwiftUI وإعادة استخدامها في SwiftUI وكيفية استخدامها بشكل جميل لإنشاء طريقة عرض معقدة. رائع!

سنقوم بإنشاء بعض طرق العرض الأخرى في المقالة القادمة!

ترقبوا ذلك!

المراجع

• الجزء 1 من هذه السلسلة هو مقالة استنساخ Instagram.
• الجزء 2 هو مقالة Swift Instagram Clone.
• الجزء 3 هو المقال Instagram Clone Profile.
• الجزء 4 هو المقال Insta Clone Homeview.
• قم بتنزيل مشروع استنساخ Instagram Clone لنظام iOS مع شفرة المصدر وابدأ في استخدام Back4App.

قم بالتسجيل الآن في Back4App وابدأ في إنشاء تطبيق Instagram Clone الخاص بك.