محاذاة النص في SwiftUI: دليل كامل مع أمثلة

محاذاة النص في SwiftUI: من المبتدئ إلى المحترف

هل سبق لك أن حدقت في الشاشة محاولاً فهم سبب التصاق النص متعدد الأسطر في SwiftUI بالهامش الأيسر بعناد، على الرغم من أنك حددت بوضوح .center؟ ألم مألوف. سؤال "محاذاة النص في SwiftUI" يجمع آلاف المشاهدات على Stack Overflow ليس من دون سبب - إنها واحدة من تلك التفاصيل الصغيرة التي يمكن أن تفسد الواجهة بأكملها.

في هذه المقالة، سنستعرض جميع طرق التحكم في محاذاة النص في SwiftUI. سأريكم ليس فقط التقنيات الأساسية، ولكن أيضًا الحيل التي ستوفر عليكم ساعات من البحث. هيا بنا!

1. الأساسيات: .multilineTextAlignment

أول معدل ستواجهه هو multilineTextAlignment. يعمل هذا المعدل مع النص متعدد الأسطر، لكنه في الواقع يؤثر أيضًا على النص أحادي السطر. دعنا نرى مثالاً:

import SwiftUI\n\nstruct AlignmentExample: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("هذا النص محاذى إلى اليسار. افتراضياً في SwiftUI، يلتصق النص بالجانب الأيسر.")\n                .multilineTextAlignment(.leading)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("هذا النص في المنتصف. مثالي للعناوين والاقتباسات.")\n                .multilineTextAlignment(.center)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("هذا النص محاذى إلى اليمين. يُستخدم غالباً في التدويل للغات ذات الكتابة من اليمين إلى اليسار.")\n                .multilineTextAlignment(.trailing)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n        }\n        .padding()\n    }\n}

هام: يعمل multilineTextAlignment فقط داخل حاوية تحد من عرض النص. إذا لم تحدد frame، فسيشغل النص كل العرض المتاح، وقد لا تعمل المحاذاة كما تتوقع.

2. الفرق بين .leading و .left

في SwiftUI، يوجد .leading و .trailing و .left و .right. ما الفرق؟

\n
• .leading / .trailing - قيم متكيفة. في اللغات ذات الكتابة من اليسار إلى اليمين (الإنجليزية، الروسية) .leading = .left، .trailing = .right. في العربية أو العبرية - العكس.
\n
• .left / .right - ربط ثابت بالجانب. لا تتغير حسب الإعدادات المحلية.
\n

توصي Apple باستخدام .leading و .trailing لدعم التدويل. ولكن إذا كنت بحاجة إلى "دائماً إلى اليسار" - استخدم .left.

3. محاذاة النص داخل الحاويات

غالباً ما تكون المشكلة ليست في Text نفسه، بل في كيفية وضعه داخل VStack أو HStack أو ZStack. هنا يأتي دور معامل alignment في الأكوام.

3.1. VStack و HStack

struct StackAlignmentExample: View {\n    var body: some View {\n        VStack(alignment: .leading, spacing: 10) {\n            Text("عنوان")\n                .font(.title)\n            Text("هذا وصف يجب أن يبدأ من نفس الحد الأيسر للعنوان. بدون محاذاة صريحة للمكدس، قد ينزاح النص.")\n                .font(.body)\n        }\n        .frame(maxWidth: 300)\n        .padding()\n        .background(Color.yellow.opacity(0.3))\n        .cornerRadius(10)\n    }\n}

حيلة: إذا كنت تريد أن يكون كل النص داخل VStack محاذياً للمنتصف، ولكن مع إمكانية أن يكون لكل عنصر محاذاته الخاصة - قم بدمج alignment للمكدس مع multilineTextAlignment للنصوص المحددة.