ウィジェットとレイアウト
ボタン、入力欄、パネルを構築します。
「ウィジェットとレイアウト」はCoddyKit上の無料Learn Rust Codingレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはLearn Rust Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Learn Rust Codingコースには全4レッスンが含まれています。
ウィジェットの種類
eguiには、ラベル、見出し、ボタン、チェックボックス、ラジオボタン、スライダー、ドラッグ操作可能な値、テキスト編集、コンボボックスなど、豊富な組み込みウィジェットが用意されています。
それぞれはUiのメソッドであり、Responseを返します。クラスをインスタンス化するのではなく、メソッドを順番に呼び出してUIを組み立てます。
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で使えます。独自のカスタムウィジェットも含まれます。これが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| ...)を呼び出すと、1行の中で左から右へ配置できます。
これらのレイアウト用クロージャは自由に入れ子にできるため、通常の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| ...)を使います。列ごとに1つずつ、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がスタイルを制御します。次は、アプリケーションの状態を適切に管理する方法を学びます。
よくある質問
「ウィジェットとレイアウト」レッスンは無料ですか？
はい。「ウィジェットとレイアウト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Learn Rust Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Learn Rust Codingコースには全4レッスンが含まれています。
「ウィジェットとレイアウト」で何を学びますか？
ボタン、入力欄、パネルを構築します。 ブラウザで直接実行するハンズオンコードでLearn Rust Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Learn Rust Codingを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのLearn Rust Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ウィジェットとレイアウト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このLearn Rust Codingレッスンでコードを書いて実行できますか？
はい。すべてのLearn Rust Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。