组件与布局
构建按钮、输入框和面板。
组件与布局 是 CoddyKit 上的免费 Learn Rust Coding 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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 trait
ui.button 等便捷方法封装了功能更丰富的控件结构体。对于可配置的控件，您需要构建相应的结构体，再将其传给 ui.add。
任何实现了 Widget trait 的类型都可以与 ui.add 配合使用，包括您自己的自定义控件。这是 egui API 可扩展的核心。
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| ...)，即可在一行中从左到右放置控件。
这些布局闭包可以自由嵌套，让您能够使用普通的 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 还可以在您的应用内创建可移动、可调整大小的浮动窗口。它非常适合工具面板和对话框。
使用 .open(&mut self.show) 将其可见性绑定到一个 bool，这样关闭按钮就能切换您的状态。
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()
});组合所有内容
实际应用会嵌套使用这些基本构件：顶部面板中的菜单、左侧面板中的导航，以及中央面板中滚动区域里的网格。
由于布局只是嵌套闭包和普通控制流，重构一个界面只需修改代码，而不必对树结构进行复杂操作。
快速检查
您应该最后添加哪个面板？
总结
egui 提供标签、滑块、文本编辑框等控件——它们都是 Ui 上返回 Response 的方法；对于可配置的控件，可以使用 ui.add。
布局由嵌套闭包构成：horizontal、vertical、columns、Grid 和 ScrollArea。面板和 Window 定义顶层结构，Visuals 控制样式。接下来：以整洁的方式管理应用状态。
常见问题解答
「组件与布局」课时是免费的吗？
是的 — 「组件与布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Learn Rust Coding 课程的其余内容，请升级到 CoddyKit PRO。 Learn Rust Coding 课程共包含 4 节课。
「组件与布局」这节课中我会学到什么？
构建按钮、输入框和面板。 你通过在浏览器中直接运行的动手代码来练习 Learn Rust Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Learn Rust Coding 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Learn Rust Coding 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「组件与布局」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Learn Rust Coding 课中编写并运行代码吗？
能。每节 Learn Rust Coding 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。