ترتيب طرق العرض باستخدام StackLayout
- 10 دقائق
يعد تجميع طرق العرض في قائمة رأسية أو أفقية تصميمًا شائعًا لواجهات المستخدم. فكر في بعض الصفحات الشائعة في التطبيقات. تتضمن الأمثلة صفحات تسجيل الدخول والتسجيل والإعدادات. تحتوي كافة هذه الصفحات عادةً على محتوى مكدس. في هذه الوحدة، ستتعلم كيفية ترتيب طرق العرض في قائمة عمودية أو أفقية باستخدام StackLayout وعناصر تحكم VerticalStackLayout StackLayout المحسنة و HorizontalStackLayout.
ما هو StackLayout و VerticalStackLayout و HorizontalStackLayout؟
StackLayout هي حاوية تخطيط تنظم طرق العرض التابعة الخاصة بها من اليسار إلى اليمين أو من أعلى إلى أسفل. يعتمد الاتجاه على Orientation الخاصية الخاصة به والقيمة الافتراضية هي من الأعلى إلى الأسفل. يوضح الرسم التوضيحي التالي طريقة عرض تصورية لـStackLayout عمودي .
StackLayoutيحتوي على قائمةChildrenالتي يرثها من الفئة الأساسيةLayout<T>الخاصة به. تخزن القائمة طرق العرض، وهو أمر مفيد لأن معظم عناصر واجهة المستخدم التي تعمل معها في .NET Multi-platform App UI (MAUI) مشتقة منView. لوحات التخطيط مشتقة أيضا منView، ما يعني أنه يمكنك تداخل اللوحات إذا كنت بحاجة إلى ذلك.VerticalStackLayoutوهيHorizontalStackLayoutالتخطيطات المفضلة لاستخدامها عندما تعرف أن اتجاهك لن يتغير، لأنها محسنة للأداء.
كيفية إضافة طرق عرض إلى StackLayout
في .NET MAUI، يمكنك إضافة طرق عرض إلى في التعليمات البرمجية StackLayout C# أو في Extensible Application Markup Language (XAML). فيما يلي مثال على ثلاث طرق عرض تمت إضافتها باستخدام التعليمات البرمجية:
<StackLayout x:Name="stack">
</StackLayout>
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };
stack.Children.Add(a);
stack.Children.Add(b);
stack.Children.Add(c);
}
}
يمكنك إضافة طرق العرض إلى Children المجموعة ووضع StackLayout طرق العرض تلقائيا في قائمة عمودية. إليك ما يبدو عليه على جهاز Android:
للقيام بنفس الشيء في XAML، قم بتداخل الأطفال داخل العلامات StackLayout . يضيف محلل XAML طرق العرض المتداخلة إلى Children المجموعة تلقائيًا لأن Children لكافة لوحات ContentProperty التخطيط. فيما يلي مثال على نفس طرق العرض الثلاث التي يتم إضافتها إلى StackLayout XAML:
<StackLayout>
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40" />
</StackLayout>
كيفية ترتيب طرق العرض في StackLayout
يحدد ترتيب طرق العرض في Children المجموعة ترتيب التخطيط عند عرضها. بالنسبة إلى عروض XAML التي تمت إضافتها، يتم استخدام الترتيب النصي. بالنسبة للأطفال الذين تمت إضافتهم في التعليمات البرمجية، يحدد الترتيب الذي تستدعي Add به الأسلوب ترتيب التخطيط.
كيفية تغيير المسافة بين طرق العرض في StackLayout
من الشائع أن تريد بعض المساحة بين العناصر التابعة في StackLayout .
StackLayout يتيح لك التحكم في المسافة بين كل طفل باستخدام الخاصية Spacing . القيمة الافتراضية هي صفر وحدات، ولكن يمكنك تعيينها إلى ما يبدو جيدا لك. فيما يلي مثال على تعيين Spacing الخاصية إلى 30 في XAML:
<StackLayout Spacing="30">
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40" />
</StackLayout>
توضح لقطة الشاشة التالية كيفية عرض واجهة المستخدم على Android:
كيفية تعيين اتجاه StackLayout
StackLayout يتيح لك ترتيب العناصر التابعة في عمود أو صف. يمكنك التحكم في هذا السلوك عن طريق تعيين Orientation الخاصية الخاصة به. حتى الآن، لقد تم عرض فقط StackLayout العمودي.
Vertical هو الافتراضي. ماذا إذا كان تعيين Orientation إلى Vertical صراحة متروكًا لكم. يفضل بعض المبرمجين إعدادًا واضحًا لجعل الكود أكثر توثيقًا ذاتيًا.
فيما يلي مثال على تعيين Orientation الخاصية إلى Horizontal في XAML:
<StackLayout x:Name="stack" Orientation="Horizontal">
<BoxView Color="Silver" WidthRequest="40"/>
<BoxView Color="Blue" WidthRequest="40"/>
<BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>
إشعار
كما هو موضح في التمرين السابق، يؤدي التغيير في اتجاه StackPanel إلى تجاهل HeightRequest خصائص كل BoxView. بدلا من ذلك، يمكنك تعيين WidthRequest.
توضح لقطة الشاشة التالية كيفية عرض واجهة المستخدم على جهاز Android:
تعيين تخطيطات طريقة عرض في StackLayout
كل طريقة عرض لها VerticalOptions خاصية و HorizontalOptions . يمكنك استخدام هذه الخصائص لتعيين موضع طريقة العرض داخل منطقة العرض المستطيلة التي توفرها لوحة التخطيط.
كما هو ملاحظ سابقا، مع StackLayout، يعتمد سلوك الخصائص LayoutOptions على Orientation خاصية .StackLayout
StackLayout يستخدم LayoutOptions الخاصية في الاتجاه المعاكس لـ Orientation. بشكل افتراضي، لا يتم تخصيص أي مساحة إضافية للعنصر في تخطيط المكدس في نفس اتجاه Orientation تخطيط المكدس. لا يؤدي تعيين موضع لهذا الاتجاه في هذه الحالة الافتراضية إلى تغيير عرض العنصر. هناك تغيير في العرض، على الرغم من ذلك، عندما يتم دمج الموضع مع التوسع.
ماذا عن التوسع؟
تذكر من وحدة سابقة أن LayoutOptions البنية تحتوي على bool خاصية تسمى Expands قديمة الآن في .NET MAUI. عند تعيين VerticalOptions و، قد تلاحظ HorizontalOptions و LayoutOptionsStartAndExpandCenterAndExpandو.EndAndExpandFillAndExpand إذا قمت بتعيين LayoutOptions إلى أحد هذه AndExpand الخيارات، يتم تجاهل الخيار ويتم استخدام الجزء الأول من LayoutOptions مثل Startأو CenterEndأو أو Fill. إذا كنت تقوم بالترحيل من Xamarin.Forms، فيجب إزالة كل AndExpand هذه الخصائص. في وقت لاحق في الوحدة النمطية، نرى كيفية تحقيق وظائف مماثلة عندما نتعلم عن Grid.
StackLayouts المحسنة
كما ذكرنا سابقا، VerticalStackLayout فإن و HorizontalStackLayout هي عناصر تحكم محسنة StackLayout ذات اتجاهات محددة مسبقا. نوصي باستخدام عناصر التحكم هذه عندما يكون ذلك ممكنا، للحصول على أفضل أداء للتخطيط. تحتوي هذه التخطيطات على وظائف LayoutOptions و Spacing التي تحتوي عليها التخطيطات العادية StackLayout .
<VerticalStackLayout Spacing="30">
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>
<HorizontalStackLayout Spacing="30">
<BoxView Color="Silver" WidthRequest="40" />
<BoxView Color="Blue" WidthRequest="40" />
<BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>