الأدوات والتخطيط
أنشئ الأزرار وحقول الإدخال واللوحات
الأدوات والتخطيط درس مجاني في Learn Rust Coding على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Learn Rust Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Learn Rust Coding 4 دروس في المجموع.
مجموعة عناصر الواجهة
تأتي egui بمجموعة غنية من عناصر الواجهة المضمّنة: التسميات، والعناوين، والأزرار، ومربعات الاختيار، وأزرار الاختيار، والمنزلقات، وقيم السحب، وتحرير النصوص، ومربعات الدمج، وغير ذلك.
كل عنصر منها هو أسلوب على Ui ويُرجع Response. وتؤلّف واجهات المستخدم باستدعائها بالتتابع بدلاً من إنشاء أصناف.
ui.heading("Settings");
ui.checkbox(&mut self.dark, "Dark mode");
ui.add(egui::Slider::new(&mut self.volume, 0.0..=1.0).text("Volume"));
ui.text_edit_singleline(&mut self.name);ui.add وواجهة Widget
تغلّف الأساليب المساعدة مثل ui.button بنيات عناصر أكثر غنى. وبالنسبة إلى العناصر القابلة للتهيئة، تبني البنية وتمرّرها إلى ui.add.
كل ما يطبّق واجهة Widget يعمل مع ui.add، بما في ذلك عناصر الواجهة المخصّصة التي تنشئها. وهذا هو الجزء الأساسي القابل للتوسعة من API الخاصة بـ egui.
let slider = egui::Slider::new(&mut self.zoom, 0.5..=4.0)
.logarithmic(true)
.suffix("x");
let resp = ui.add(slider);
if resp.changed() { self.rerender(); }التخطيط الرأسي والأفقي
يضع Ui عناصر الواجهة من الأعلى إلى الأسفل افتراضياً. استدعِ ui.horizontal(|ui| ...) لوضعها من اليسار إلى اليمين ضمن صف.
يمكن تشبيك closures الخاصة بالتخطيط بحرية، مما يتيح لك بناء صفوف من الأعمدة وأعمدة من الصفوف باستخدام تدفق تحكم عادي في Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});الأعمدة
لإنشاء تخطيطات متعددة الأعمدة متساوية التباعد، يمنحك ui.columns(n, |cols| ...) شريحةً من قيم Ui، قيمةً لكل عمود.
يحصل كل عمود على عرض متساوٍ، وتضيف عناصر الواجهة إلى cols[i]. وهذا مفيد للوحات أو النماذج المتجاورة.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});اللوحات
تأتي البنية العليا من اللوحات: TopBottomPanel لأشرطة القوائم والحالة، وSidePanel للتنقل، وCentralPanel للمحتوى الرئيسي.
أضف اللوحات الجانبية والعلوية أولاً؛ إذ تملأ CentralPanel المساحة المتبقية. ويهم الترتيب لأن كل لوحة تحجز حافتها.
egui::TopBottomPanel::top("bar").show(ctx, |ui| {
ui.label("Menu");
});
egui::SidePanel::left("nav").show(ctx, |ui| {
ui.label("Sidebar");
});
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Main content");
});مناطق التمرير
عندما يتجاوز المحتوى المساحة المتاحة، لفّه داخل ScrollArea. فهي تقصّ المحتوى المتجاوز وتضيف أشرطة التمرير تلقائياً.
استخدم .auto_shrink([false, false]) لجعلها تملأ المنطقة بدلاً من الانكماش لتناسب المحتوى، واستخدم .stick_to_bottom(true) لواجهات عرض السجلات.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});الشبكات للنماذج
تعمل egui::Grid على محاذاة عناصر الواجهة ضمن جدول مرتب من الصفوف والأعمدة، وهي مثالية لنماذج التسمية والقيمة.
أضف الخلايا من اليسار إلى اليمين، واستدعِ ui.end_row() لبدء الصف التالي. وتحافظ egui تلقائياً على محاذاة الأعمدة عبر الصفوف.
egui::Grid::new("form").num_columns(2).show(ui, |ui| {
ui.label("Host");
ui.text_edit_singleline(&mut self.host);
ui.end_row();
ui.label("Port");
ui.add(egui::DragValue::new(&mut self.port));
ui.end_row();
});التباعد والمحاذاة
يأتي التحكم الدقيق من أدوات التباعد المساعدة: إذ يدرج ui.add_space(pixels) فجوة، بينما يرسم ui.separator() خطاً فاصلاً.
لمحاذاة المحتوى، استخدم ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...)، وهي الطريقة الاصطلاحية لدفع الأزرار إلى الحافة اليمنى للصف.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});النوافذ العائمة
إضافةً إلى اللوحات، تنشئ egui::Window نافذةً عائمة قابلةً للتحريك وتغيير الحجم داخل تطبيقك. وهي مناسبة جداً لمجموعات الأدوات ومربعات الحوار.
اربط ظهورها بقيمة bool باستخدام .open(&mut self.show) حتى يبدّل زر الإغلاق حالتك.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});التنسيق والمظاهر
يتحكم ctx.style() وVisuals الخاص به في مظهر كل عنصر واجهة. بدّل السمات باستخدام ctx.set_visuals(egui::Visuals::dark()) أو light().
يمكنك تعديل التباعد، والتدوير، والألوان عالمياً عبر تغيير النمط، مما يمنح التطبيق كله مظهراً مخصصاً ومتسقاً.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});تأليف كل العناصر
تُشبّك التطبيقات الحقيقية هذه العناصر الأساسية: لوحة علوية للقائمة، ولوحة جانبية يسرى للتنقل، ولوحة مركزية تحتوي على شبكة داخل منطقة تمرير.
لأن التخطيط ليس سوى closures متداخلة وتدفق تحكم عادي، فإن إعادة هيكلة شاشة ما تكون تعديلاً على الكود، لا عملية جراحية لشجرة.
تحقق سريع
أي لوحة ينبغي أن تضيفها أخيراً؟
مراجعة
توفّر egui التسميات، والمنزلقات، وتحرير النصوص، وغير ذلك؛ وكلها أساليب على Ui تُرجع Response، مع استخدام ui.add للعناصر القابلة للتهيئة.
يُبنى التخطيط من closures متداخلة: horizontal وvertical وcolumns وGrid وScrollArea. وتحدّد اللوحات وWindow البنية العليا، بينما تتحكم Visuals في التنسيق. تالياً: إدارة حالة التطبيق بطريقة منظمة.
الأسئلة الشائعة
هل درس «الأدوات والتخطيط» مجاني؟
نعم — نص درس «الأدوات والتخطيط» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Learn Rust Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Learn Rust Coding 4 دروس في المجموع.
ماذا ستتعلم في «الأدوات والتخطيط»؟
أنشئ الأزرار وحقول الإدخال واللوحات تتمرن على Learn Rust Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Learn Rust Coding؟
لا تُشترط خبرة سابقة. Learn Rust Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الأدوات والتخطيط»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Learn Rust Coding هذا؟
نعم. كل درس في Learn Rust Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.