Native UI Book · 04 Data & VirtualList

虚拟列表、数据表格与图表 (Data Display)

零卡顿渲染 1,000,000 行结构化数据。仅向 GPU 提交当前视口可见行图元。

百万行虚拟滚动列表 (`v_virtual_list`)

得益于 GPUI 的视口裁剪与 `gpui-kit` 的虚拟化布局器，即使绑定百万级遥测日志 Vec<LogRecord>，每帧也仅对当前视口可见范围（visible_range: Range<usize>）内的 20~40 行元素构造图元，内存常驻稳定在 30MB 以内：

rust

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

pub fn render_log_stream(&mut self, cx: &mut Context<Self>) -> impl IntoElement {
    // 仅向 GPU 提交当前视口可见索引范围 visible_range
    v_virtual_list(
        cx.entity().clone(),
        "telemetry-log-stream",
        self.row_sizes.clone(),
        |view, visible_range, _window, cx| {
            visible_range
                .map(|ix| {
                    let entry = &view.logs[ix];
                    h_flex()
                        .w_full()
                        .px_4()
                        .py_1()
                        .justify_between()
                        .border_b_1()
                        .border_color(cx.theme().border)
                        .child(format!("[#{:06}] {}", ix, entry.node_id))
                        .child(format!("{:.2} ms", entry.latency_ms))
                })
                .collect()
        },
    )
}