布局系统与响应式断点 (Layout & Responsive)

rust Copy

use gpux::prelude::*;
use gpux::kit::{h_flex, v_flex, ActiveTheme, StyledExt};

pub fn render_adaptive_shell(
    rc: &ResponsiveContext,
    cx: &mut Context<Self>,
) -> impl IntoElement {
    let pad = rc.recommended_padding();
    let cols = rc.recommended_columns();

    v_flex()
        .size_full()
        .pt(px(rc.safe_area.top))
        .pb(px(rc.safe_area.bottom))
        .bg(cx.theme().background)
        .text_color(cx.theme().foreground)
        .child(
            h_flex()
                .flex_1()
                .p(px(pad))
                .gap_4()
                .when(rc.is_expanded(), |el| {
                    el.child(
                        v_flex()
                            .w(px(240.0))
                            .p_3()
                            .rounded_lg()
                            .bg(cx.theme().sidebar)
                            .child("Desktop Navigation Rail"),
                    )
                })
                .child(
                    v_flex()
                        .flex_1()
                        .gap_3()
                        .child(format!("Grid Columns: {cols} · Breakpoint: {:?}", rc.breakpoint())),
                ),
        )
}