Learn Rust Coding · บทเรียน

วิดเจ็ตและการจัดวาง

สร้างปุ่ม ช่องป้อนข้อมูล และแผง

วิดเจ็ตและการจัดวาง เป็นบทเรียน Learn Rust Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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| ...) เพื่อวางวิดเจ็ตจากซ้ายไปขวาภายในแถว

closure สำหรับการจัดวางเหล่านี้ซ้อนกันได้อย่างอิสระ ทำให้คุณสร้างแถวของคอลัมน์และคอลัมน์ของแถวได้โดยใช้ลำดับการควบคุมปกติของ 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()
});

ประกอบทุกอย่างเข้าด้วยกัน

แอปจริงมักซ้อนองค์ประกอบพื้นฐานเหล่านี้: แผงด้านบนสำหรับเมนู แผงด้านซ้ายสำหรับการนำทาง และแผงกลางที่มีตารางอยู่ภายในพื้นที่เลื่อน

เนื่องจากการจัดวางเป็นเพียง closure ที่ซ้อนกันและลำดับการควบคุมปกติ การปรับโครงสร้างหน้าจอจึงเป็นเพียงการแก้โค้ด ไม่ใช่การผ่าตัดต้นไม้

ตรวจสอบความเข้าใจ

คุณควรเพิ่มแผงใดเป็นรายการสุดท้าย

สรุป

egui มีทั้งป้ายกำกับ แถบเลื่อน ช่องแก้ไขข้อความ และอื่น ๆ ทั้งหมดเป็นเมธอดบน Ui ที่คืนค่า Response และมี ui.add สำหรับวิดเจ็ตที่กำหนดค่าได้

การจัดวางสร้างจาก closure ที่ซ้อนกัน ได้แก่ horizontal vertical columns Grid และ ScrollArea แผงและ Window กำหนดโครงสร้างระดับบนสุด ส่วน Visuals ควบคุมรูปแบบ ต่อไป: การจัดการสถานะแอปพลิเคชันอย่างเป็นระเบียบ

คำถามที่พบบ่อย

บทเรียน “วิดเจ็ตและการจัดวาง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “วิดเจ็ตและการจัดวาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Learn Rust Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Learn Rust Coding มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “วิดเจ็ตและการจัดวาง”

สร้างปุ่ม ช่องป้อนข้อมูล และแผง คุณปฏิบัติ Learn Rust Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Learn Rust Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Learn Rust Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “วิดเจ็ตและการจัดวาง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Learn Rust Coding นี้ได้ไหม

ได้ บทเรียน Learn Rust Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Learn Rust Coding