SwiftUI Academy · درس

شريط الأدوات وعنوان التنقل

أضف العناوين وأزرار شريط الأدوات إلى الأشرطة

شريط الأدوات وعنوان التنقل درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Naming the Screen

Every screen deserves a clear name. The navigationTitle modifier puts a heading in the navigation bar so users always know where they are. 🧭

.navigationTitle("Inbox")

Where the Title Goes

Attach navigationTitle to the content inside the NavigationStack, not to the stack itself. The bar then reads the title from the current screen.

NavigationStack {
    List { }
        .navigationTitle("Inbox")
}

Large vs Inline

By default the title is large and shrinks as you scroll. Use navigationBarTitleDisplayMode to force a compact inline style instead.

.navigationBarTitleDisplayMode(.inline)

Adding Toolbar Buttons

The toolbar modifier lets you place buttons in the navigation bar, like an add button or an edit action for the current screen.

.toolbar {
    Button("Add") { addItem() }
}

Choosing a Placement

Wrap each control in a ToolbarItem and pick a placement so buttons land on the correct side of the bar.

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Add") { }
    }
}

Leading and Trailing

Use topBarLeading for the left edge and topBarTrailing for the right. These adapt automatically for right-to-left languages. 🌍

Icons in the Bar

Toolbar buttons often use SF Symbols instead of words to stay compact. A small image keeps the bar tidy on every device.

Button {
    addItem()
} label: {
    Image(systemName: "plus")
}

Many Buttons at Once

You can add several ToolbarItem entries in one toolbar block, grouping related actions like edit, share, and add together.

The Bottom Toolbar

Placement is not limited to the top. Use bottomBar to pin actions to the bottom of the screen for thumb-friendly controls.

ToolbarItem(placement: .bottomBar) {
    Button("Done") { }
}

Titles Follow the Stack

Each pushed screen sets its own title, and the bar updates as you navigate. The previous title even becomes the back button label.

Keep Bars Uncluttered

Resist filling the bar with buttons. Two or three clear actions keep the screen calm and easy to scan.

Quick Check

Which modifier adds buttons to the navigation bar?

Recap: Toolbar & Title

You name screens with navigationTitle and add buttons with toolbar and ToolbarItem placements. Up next, driving navigation entirely from code. 🚀

الأسئلة الشائعة

هل درس «شريط الأدوات وعنوان التنقل» مجاني؟

نعم — نص درس «شريط الأدوات وعنوان التنقل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «شريط الأدوات وعنوان التنقل»؟

أضف العناوين وأزرار شريط الأدوات إلى الأشرطة تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «شريط الأدوات وعنوان التنقل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى SwiftUI Academy