コンポーネント

状態を持つ画面には View を実装します。状態を持たない部品には、Element を返す関数が使えます。

#コンポーネントの定義

struct Greeting {
    name: String,
}

impl View for Greeting {
    fn render(&mut self, _cx: &mut ViewContext<'_, Self>) -> impl IntoElement {
        text(format!("Hello, {}", self.name))
    }
}

子ビューも、自身の状態を持たないときは Element を返す関数にできます。

#プリミティブ

div、text、button、text_input、text_area、img、svg、custom_shader、VirtualList が基本の部品です。submit_button はいちばん近い form を送信します。Markdown は features = ["markdown"]、Editor、CodeBlock、DiffView は features = ["editor"] で利用でき、Terminal も任意機能です。

#複合コンポーネント

let checkbox = Checkbox::new(self.checked);
checkbox
    .root()
    .flex_row()
    .gap(8.0)
    .on_click(toggle)
    .child(checkbox.indicator_with(div().size(16.0, 16.0)))
    .child(text("Remember this device"))

フォーカスと値がつながったままになるよう、パーツはその所属するルートの下に置きます。

#制御された状態

値はビューに保持し、コンストラクターへ渡し、リスナーから更新します。そのあと cx.invalidate() を呼び出します。状態の所有者はビューです。

#コンポーネントの種類

コンポーネントリファレンスでは、フォーム、オーバーレイ、メニュー、テーブル、ツリーなどを扱います。examples/base_ui_components.rs はギャラリーです。

#各パーツのスタイル

表示される各パーツに、チェーンできるスタイルメソッドを適用します。パーツはスタイルなしで提供されるので、色とレイアウトはアプリ側のものです。TabsState や SelectState のような型は、独自の見た目のために現在の状態を公開します。