UI - Editing Popup

Main 画面がレンダリングされたので、 Editing ポップアップをレンダリングする必要があるかどうかを確認する必要があります。 ratatui レンダラーは、 render_widget で Rect 内のセルを単純に書き留めるので、 render_widget を Main 画面の上に領域を指定してポップアップの外観を作成する必要があります。

ポップアップエリアとタイトル

私たちが最初にすることは、ポップアップを含む Block を描画することです。この Block は、それが何であるかをユーザーに説明するために表示するタイトルを表示します。

    if let Some(editing) = &app.currently_editing {
        let popup_block = Block::default()
            .title("Enter a new key-value pair")
            .borders(Borders::NONE)
            .style(Style::default().bg(Color::DarkGray));

        let area = centered_rect(60, 25, frame.area());
        frame.render_widget(popup_block, area);

ポップアップコンテンツ

ポップアップがどこに行くのか、ポップアップのレイアウトを作成し、その内部のウィジェットを作成して描画できます。

最初に、 centered_rect で与えられた Rect を分割し、そこからレイアウトを作成します。 margin(1) の使用に注意してください。これは、レイアウトブロックの周りに1つのスペースマージンを提供します。つまり、新しいブロックとウィジェットが最初のポップアップブロックから何も上書きしないことを意味します。

        let popup_chunks = Layout::default()
            .direction(Direction::Horizontal)
            .margin(1)
            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
            .split(area);

キーと値を表示するレイアウトができたので、実際にユーザーがすでに入力した内容を表示するブロックと段落を作成します。

        let mut key_block = Block::default().title("Key").borders(Borders::ALL);
        let mut value_block = Block::default().title("Value").borders(Borders::ALL);

        let active_style = Style::default().bg(Color::LightYellow).fg(Color::Black);

        match editing {
            CurrentlyEditing::Key => key_block = key_block.style(active_style),
            CurrentlyEditing::Value => value_block = value_block.style(active_style),
        };

        let key_text = Paragraph::new(app.key_input.clone()).block(key_block);
        frame.render_widget(key_text, popup_chunks[0]);

        let value_text = Paragraph::new(app.value_input.clone()).block(value_block);
        frame.render_widget(value_text, popup_chunks[1]);
    }

ブロックを変数として宣言し、ユーザーが現在編集しているブロックに追加のスタイルを追加していることに注意してください。次に、Paragraph ウィジェットを作成し、それらの変数をブロックに割り当てます。また、これらのウィジェットをレンダリングするために、popup_block レイアウトではなく popup_chunks レイアウトを使用していることにも注意してください。