Create Dynamic layouts

Real Worldアプリケーションでは、コンテンツが動的になることがよくあります。たとえば、チャットアプリケーションは、着信メッセージの数に基づいてチャット入力領域をサイズ変更する必要がある場合があります。これを達成するために、レイアウトを動的に生成できます。

fn get_layout_based_on_messages(msg_count: usize, f: &Frame) -> Rc<[Rect]> {
    let msg_percentage = if msg_count > 50 { 80 } else { 50 };

    Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage(msg_percentage),
            Constraint::Percentage(100 - msg_percentage),
        ])
        .split(f.size())
}

ユーザーの入力またはコマンドに基づいてレイアウトを更新することもできます。

match action {
    Action::IncreaseSize => {
        current_percentage += 5;
        if current_percentage > 95 {
            current_percentage = 95;
        }
    },
    Action::DecreaseSize => {
        current_percentage -= 5;
        if current_percentage < 5 {
            current_percentage = 5;
        }
    },
    _ => {}
}

let chunks = Layout::default()
    .direction(Direction::Horizontal)
    .constraints([
        Constraint::Percentage(current_percentage),
        Constraint::Percentage(100 - current_percentage),
    ])
    .split(f.size());