صفحة 131 - كتاب التقنية الرقمية - الصف 12 - الفصل 1 - المملكة العربية السعودية

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

لإضافة مكون الترتيب العمودي (VerticalArrangement):

من مجموعة Layout (تخطيط)، حدد مكون VerticalArrangement (الترتيب العمودي). 1 أضف مكون VerticalArrangement (الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفلاته في Viewer (العارض). 2 في المكون (VerticalArrangement) الموجود في Properties (الخصائص)، عين خاصية AlignHorizontal (محاذاة أفقية) إلى 3 (التوسيط: 3)، 3 وخاصية AlignVertical (محاذاة عمودية) إلى Center: 2 (التوسيط: 2)، 4 وخاصية BackgroundColor (لون الخلفية) إلى None (لا يوجد). 5

المكون (VerticalArrangement) الموجود في Properties (الخصائص).

لحذف عنصر اذهب لقائمة الأدوات المكون (component) حدد العنصر المراد حذفه باختياره أسفل القائمة يوجد زر الحذف (Delete).

وزارة التعليم Ministry of Education 2025 - 1447

131

حان الوقت لإضافة النصائح الصحية في التطبيق الخاص بك. لعرض النصائح الموضوعة من أعلى إلى أسفل، ستستخدم مكون الترتيب العمودي (VerticalArrangement). لإضافة مكون الترتيب العمودي (VerticalArrangement): من مجموعة Layout (تخطيط)، حدد مكون VerticalArrangement (الترتيب العمودي). 1 أضف مكون VerticalArrangement (الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفلاته في Viewer (العارض). 2 في المكون (VerticalArrangement) الموجود في Properties (الخصائص)، عين خاصية AlignHorizontal (محاذاة أفقية) إلى 3 (التوسيط: 3)، 3 وخاصية AlignVertical (محاذاة عمودية) إلى Center: 2 (التوسيط: 2)، 4 وخاصية BackgroundColor (لون الخلفية) إلى None (لا يوجد). 5 المكون (VerticalArrangement) الموجود في Properties (الخصائص). لحذف عنصر اذهب لقائمة الأدوات المكون (component) حدد العنصر المراد حذفه باختياره أسفل القائمة يوجد زر الحذف (Delete). وزارة التعليم Ministry of Education 2025 - 1447 131 --- VISUAL CONTEXT --- **DIAGRAM**: App Builder Interface Description: A screenshot of an app development environment, likely App Inventor or a similar block-based programming platform. It displays three main panels: 'Palette' on the left, 'Viewer' (a simulated smartphone screen) in the center, and 'Components' and 'Properties' on the right. The 'Palette' shows 'User Interface' components, including 'Layout' options like 'HorizontalArrangement' and 'VerticalArrangement'. The 'Viewer' displays a background image of various foods (apples, carrots, tomatoes) with a green square overlaid, labeled with '2'. The 'Components' panel lists 'VerticalArrangement1'. The 'Properties' panel shows configurable attributes for 'VerticalArrangement1', such as 'AlignHorizontal', 'AlignVertical', 'BackgroundColor', 'Height', 'Width', 'Image', and 'Visible'. Several numbered circles (1, 2, 3, 4, 5) are overlaid on the screenshot, indicating specific areas referenced in the accompanying text instructions. Context: This diagram visually guides the user through the process of adding and configuring a 'VerticalArrangement' component in an app, demonstrating how to select it from the palette, drag it to the viewer, and adjust its properties for alignment and background color. **DIAGRAM**: Tip for Deleting Components Description: A stylized illustration of a robot's head, colored in blue and white, with a speech bubble extending from its right side. The speech bubble contains Arabic text providing an instruction or tip. Context: This diagram, with its accompanying text, provides a helpful tip or instruction on how to delete a component within the app development environment, indicating where to find the delete button.