Create custom widgets

Ratatuiは、事前に構築されたウィジェットの豊富なセットを提供していますが、特定のニーズに合わせた一意のコンポーネントが必要なシナリオがある場合があります。そのような場合、カスタムウィジェットの作成は非常に貴重になります。このページでは、カスタムウィジェットを設計および実装するプロセスをガイドします。

`Widget` trait

カスタムウィジェットを作成するコアには、 Widget trait があります。このtrait を実装する構造体は、フレームワークの描画機能を使用してレンダリングできます。

pub struct MyWidget {
    // Custom widget properties
    content: String,
}

impl Widget for MyWidget {
    fn render(self, area: Rect, buf: &mut Buffer) {
        // Rendering logic goes here
    }
}

render メソッドは、現在の Buffer に描画する必要があります。 Buffer に実装された多くのメソッドがあります。

impl Widget for MyWidget {
    fn render(self, area: Rect, buf: &mut Buffer) {
        buf.set_string(area.left(), area.top(), &self.content, Style::default().fg(Color::Green));
    }
}

特定の状態では、 Widget trait がその構造をどのようにレンダリングするかを実装します。

pub struct Button {
    label: String,
    is_pressed: bool,
    style: Style,
    pressed_style: Option<Style>,
}

impl Widget for Button {
    fn render(self, area: Rect, buf: &mut Buffer) {
        let style = if self.is_pressed {
            self.pressed_style.unwrap_or_else(|| Style::default().fg(Color::Blue))
        } else {
            self.style
        };
        buf.set_string(area.left(), area.top(), &self.label, style);
    }
}

Ratatui には StatefulWidget もあります。これは基本的に、2 つの描画呼び出し間の情報を「記憶」できるウィジェットです。これは、リストなどのインタラクティブな UI コンポーネントがあり、どの項目が選択されたか、またはユーザーがどれだけスクロールしたかを覚えておく必要がある場合に不可欠です。

これがtrait の内訳です:

pub trait  StatefulWidget {
    type State;
    fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State);
}

type State: これは、このウィジェットが描画呼び出し間の詳細を記憶するために使用する状態のタイプを表します。
fn render(...): このメソッドは、ターミナルにウィジェットを描画する役割を担います。特に、状態への可変参照も受け取るため、必要に応じて状態を読み取って変更することができます。

Create custom widgets

Widget trait

`Widget` trait