Skip to content
Ratatui

Centering a `Rect`

Vertical レイアウトを使用して、 Horizontal レイアウトを使用して、中心にある Rect を取得できます。

layout.rs
13 collapsed lines
/// Centers a [`Rect`] within another [`Rect`] using the provided [`Constraint`]s.
///
/// # Examples
///
/// ```rust
/// use ratatui::layout::{Constraint, Rect};
///
/// let area = Rect::new(0, 0, 100, 100);
/// let horizontal = Constraint::Percentage(20);
/// let vertical = Constraint::Percentage(30);
///
/// let centered = center(area, horizontal, vertical);
/// ```
fn center(area: Rect, horizontal: Constraint, vertical: Constraint) -> Rect {
    let [area] = Layout::horizontal([horizontal])
        .flex(Flex::Center)
        .areas(area);
    let [area] = Layout::vertical([vertical]).flex(Flex::Center).areas(area);
    area
}

次に、この方法を使用して、含まれる領域の中心にあるウィジェットを描画できます。

fn render(frame: &mut Frame) {
    let text = Text::raw("Hello world!");
    let area = center(
        frame.area(),
        Constraint::Length(text.width() as u16),
        Constraint::Length(1),
    );
    frame.render_widget(text, area);
}

この機能の一般的なユースケースは、ポップアップスタイルのダイアログブロックを作成することです。このため、通常、コンテンツをレンダリングする前に、ポップアップ領域を Clear する必要があります。以下は、それをどのように行うかの例です。

fn render_popup(frame: &mut Frame) {
    let area = center(
        frame.area(),
        Constraint::Percentage(20),
        Constraint::Length(3), // top and bottom border + content
    );
    let popup = Paragraph::new("Popup content").block(Block::bordered().title("Popup"));
    frame.render_widget(Clear, area);
    frame.render_widget(popup, area);
}

このレシピの完全なコードは、ウェブサイトリポジトリで入手できます: https://github.com/ratatui/ratatui-website/blob/main/code/recipes/src/layout.rs

参照してください

ポップアップを使いやすくするためのサードパーティのウィジェットライブラリがいくつかあります。