SwiftUI هي وسيلة مريحة جديدة لإنشاء واجهات المستخدم على Xcode. إذا كنت تريد مقدمة سريعة لـ SwiftUI ، فإن نشر المدونة هذا يناسبك.
للبدء ، دعنا ننشئ مشروعًا بدعم SwiftUI. متطلبات النظام الدنيا لذلك هي macOS Catalina و Xcode 11. قم بإنشاء مشروع جديد
"File> New> Project ..." ، واختر
"Single View App" وتأكد من تحديد
"واجهة المستخدم: SwiftUI" .
سيبدو المشروع كالتالي:
كما لاحظت ، يمكنك الآن رؤية جميع التغييرات على الفور في
المعاينة . على سبيل المثال ، حاول تغيير النص إلى
"Hello، Habr!" . رائع نعم؟
إذا لم تكن هناك تغييرات ، فانقر فوق الزر "
استئناف" (في الزاوية اليمنى العليا). إذا كانت
المعاينة غير مرئية - انقر فوق
خيارات المحرر وتأكد من تحديد
Canvas (ptOptions + ommCommand + nEnter) .
عرض ، نص ، مكدس ...
إذا قمت بتحديد
ContentView.swift ،
فسنرى :
struct ContentView: View { var body: some View { Text(", !") } }
هنا نرى أن
ContentView> النص يحتوي على
نص يعرض
"Hello، Habr!" . لنقم بإضافة نص آخر. إذا حاولت إضافة مباشرة إلى
عرض الجسم ، فسيقسم Xcode. للقيام بذلك ، استخدم أولاً
HStack أو
VStack . اضغط على
Command وانقر فوق
Text (⌘Command + Text) ، ثم حدد
"Embed in HStack" .
سيقوم هذا الأمر تلقائيًا بإنشاء
HStack وإضافة نصنا إلى هناك. يمكنك الآن إضافة نص آخر:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
سويفتوي المفتش
إذا قمت بالنقر فوق
"ommCommand + Text" وحدد
"Show SwiftUI Inspector ..." ، فسيتم فتح مفتش حيث يمكنك تغيير خصائص النص بصريًا. على سبيل المثال ، إذا
تم تغيير
"الخط" في المفتش إلى
"العنوان الكبير" ، فسيتم أيضًا تغيير
الرمز إلى
.font (.largeTitle) . بسيط جدا:
لفهم ماهية
الدولة ، دعونا نضيف بعض الإجراءات. نكرر ما فعلناه من قبل:
"ommCommand + HStack" ، حدد
"Embed in VStack" ، ثم أضف Button إلى
VStack :
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
في كل مرة تنقر فوق الزر ، نقوم بتغيير قيمة
tapCount . لكن ماذا تعني
الدولة ؟ إذا كنا نريد
أن يتم عرض وجهة نظرنا
من جديد عندما تتغير بعض القيم ، فعلينا استخدام
الحالة . في هذه الحالة ، عندما
نضغط على الزر ، نقوم بتغيير
tapCount ، والذي تم تحديده على أنه
حالة . هذا هو السبب في كل نقرة
يتم تقديم
جسدنا مرة أخرى.
المعاينة المباشرة
في الوقت الحالي ، إذا قمت بالنقر فوق الزر ، فلن يحدث شيء. لإصلاح ذلك والعمل كمحاكاة ، تحتاج إلى تنشيط
"المعاينة المباشرة" . يوجد زر التنشيط في أسفل اليمين:
حاول الآن مرة أخرى. في كل مرة تضغط فيها على الزر ، ستتغير القيمة.
ما التالي؟
الآن لديك المفهوم الأساسي ل SwiftUI. علاوة على ذلك ، أنصحك بقراءة
دروس SwiftUI ، ومشاهدة
فيديو WWDC حول SwiftUI . الوثائق يمكن العثور عليها
هنا .
رابط لمشروع جيثب
هنا .