0Pricing
Learn Rust Coding · Урок

Виджеты и компоновка

Создавайте кнопки, поля ввода и панели.

«Виджеты и компоновка» — бесплатный урок 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.

С ui.add работает всё, что реализует признак Widget, включая Ваши собственные виджеты. Это расширяемое ядро 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| ...), чтобы расположить их слева направо в одной строке.

Эти замыкания размещения можно свободно вкладывать, создавая строки столбцов и столбцы строк с помощью обычного управления потоком 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()
});

Объединяем всё вместе

В реальных приложениях эти примитивы вкладываются друг в друга: верхняя панель с меню, левая боковая панель навигации и центральная панель с таблицей внутри области прокрутки.

Поскольку размещение — это всего лишь вложенные замыкания и обычное управление потоком, перестройка экрана требует изменения кода, а не хирургической операции над деревом.

Быстрая проверка

Какую панель следует добавить последней?

Итоги

egui предлагает подписи, ползунки, редакторы текста и многое другое — всё это методы Ui, возвращающие Response, а для настраиваемых виджетов используется ui.add.

Размещение строится из вложенных замыканий: 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 включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы интерфейса немедленного режима
  2. Виджеты и компоновка
  3. Управление состоянием приложения
  4. Сборка настольного приложения
← Назад к Learn Rust Coding