Widgets e layout
Crie botões, entradas e painéis.
Widgets e layout é uma aula grátis de Learn Rust Coding no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Learn Rust Coding, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Learn Rust Coding inclui 4 aulas no total.
A Coleção de Componentes
egui oferece um conjunto abrangente de componentes integrados: rótulos, cabeçalhos, botões, caixas de seleção, botões de opção, controles deslizantes, valores arrastáveis, edições de texto, caixas de combinação e muito mais.
Cada um é um método em Ui e retorna uma Response. Você compõe interfaces chamando-os em sequência, em vez de instanciar classes.
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 e o Traço Widget
Métodos convenientes como ui.button envolvem estruturas de componentes mais completas. Para componentes configuráveis, construa a estrutura e passe-a para ui.add.
Qualquer elemento que implemente o traço Widget funciona com ui.add, incluindo seus próprios componentes personalizados. Esse é o núcleo extensível da API de 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(); }Layout Vertical e Horizontal
Por padrão, um Ui organiza os componentes de cima para baixo. Chame ui.horizontal(|ui| ...) para posicioná-los da esquerda para a direita em uma linha.
Esses fechamentos de layout podem ser aninhados livremente, permitindo criar linhas de colunas e colunas de linhas usando apenas o fluxo de controle comum de Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Colunas
Para layouts com várias colunas igualmente espaçadas, ui.columns(n, |cols| ...) fornece uma fatia de valores Ui, um por coluna.
Cada coluna recebe a mesma largura, e você adiciona componentes em cols[i]. Isso é útil para painéis ou formulários lado a lado.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Painéis
A estrutura de nível superior vem dos painéis: TopBottomPanel para barras de menu e de status, SidePanel para navegação e CentralPanel para o conteúdo principal.
Adicione primeiro os painéis laterais e superiores; o CentralPanel preencherá o espaço restante. A ordem é importante porque cada painel ocupa sua borda.
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");
});Áreas de Rolagem
Quando o conteúdo exceder o espaço disponível, envolva-o em uma ScrollArea. Ela recorta o excesso e adiciona barras de rolagem automaticamente.
Use .auto_shrink([false, false]) para fazê-la preencher a região em vez de encolher ao tamanho do conteúdo, e .stick_to_bottom(true) para visualizações de registros.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Grades para formulários
egui::Grid alinha os widgets em uma tabela organizada de linhas e colunas — ideal para formulários de rótulo e valor.
Adicione as células da esquerda para a direita e chame ui.end_row() para iniciar a próxima linha. O egui mantém as colunas alinhadas entre as linhas automaticamente.
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();
});Espaçamento e alinhamento
O controle preciso vem dos auxiliares de espaçamento: ui.add_space(pixels) insere um espaço, e ui.separator() desenha uma linha divisória.
Para alinhar o conteúdo, use ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), que é a forma idiomática de posicionar botões na borda direita de uma linha.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Janelas flutuantes
Além dos painéis, egui::Window cria uma janela flutuante móvel e redimensionável dentro do seu App. Ela é excelente para paletas de ferramentas e caixas de diálogo.
Vincule a visibilidade dela a um bool com .open(&mut self.show) para que o botão de fechar alterne seu estado.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Estilo e aparência
A aparência de cada widget é controlada por ctx.style() e seus Visuals. Alterne os temas com ctx.set_visuals(egui::Visuals::dark()) ou light().
Você pode ajustar globalmente o espaçamento, o arredondamento e as cores modificando o estilo, dando a todo o App uma aparência personalizada e consistente.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Compondo tudo
Aplicativos reais aninham essas primitivas: um menu no painel superior, um painel lateral esquerdo de navegação e um painel central contendo uma grade dentro de uma área de rolagem.
Como o layout consiste apenas em closures aninhadas e fluxo de controle comum, reestruturar uma tela é uma edição de código, não uma operação de cirurgia na árvore.
Verificação rápida
Qual painel você deve adicionar por último?
Recapitulação
O egui oferece rótulos, controles deslizantes, edições de texto e muito mais — todos métodos de Ui que retornam um Response, com ui.add para widgets configuráveis.
O layout é construído com closures aninhadas: horizontal, vertical, columns, Grid e ScrollArea. Os painéis e Window definem a estrutura de nível superior, e Visuals controla o estilo. A seguir: gerenciamento limpo do estado do aplicativo.
Perguntas Frequentes
A aula “Widgets e layout” é grátis?
Sim — o texto completo de “Widgets e layout” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Learn Rust Coding, atualize para CoddyKit PRO. O curso de Learn Rust Coding inclui 4 aulas no total.
O que vou aprender em “Widgets e layout”?
Crie botões, entradas e painéis. Você pratica Learn Rust Coding com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Learn Rust Coding?
Nenhuma experiência prévia é necessária. Learn Rust Coding no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Widgets e layout”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Learn Rust Coding?
Sim. Cada aula de Learn Rust Coding inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de UI em modo imediato
- Widgets e layout
- Gerenciando o estado do aplicativo
- Empacotando um aplicativo de desktop