Select

由锚定、支持键盘导航的弹层驱动的选择控件。

和所有 GPUI Base 原语一样，Select 只提供行为和语义结构，不规定产品视觉语言。请使用 GPUI 样式并组合导出的部件，使其符合你的设计系统。

示例

原生示例和页面上方的 WASM 预览共用同一份实现：

cargo run -p gpui-base --example components -- select

导入

use gpui_base::{Select};

结构与 API

示例组合上述公开类型。GPUI 的标准样式和事件 trait 负责表现，Base 类型负责交互结构。权威实现位于 components/select.rs，原生与浏览器预览编译的是同一文件。

状态与事件

应用保存当前值；打开状态、焦点项与选择行为由控件协调。

受控状态应保存在父渲染类型或 GPUI entity 中；在回调中更新并调用 cx.notify()，不要在每次渲染时重建持久 entity。

完整 Rust 示例

use super::*;

impl BaseShowcase {
    pub(in super::super) fn select(
        &self,
        combobox: bool,
        cx: &mut Context<Self>,
    ) -> impl IntoElement {
        let open = self.select_open;
        let selected = self.select_index.min(3);
        let labels = ["GPUI", "React", "SwiftUI", "Vue"];
        let entity = cx.entity().downgrade();
        let trigger_entity = entity.clone();
        let trigger = div()
            .id("select-trigger")
            .h_7()
            .px_2()
            .text_xs()
            .flex()
            .items_center()
            .justify_between()
            .border_1()
            .border_color(super::example_rgb(0x171717))
            .on_click(move |_, _, cx| {
                _ = trigger_entity.update(cx, |this, cx| {
                    this.select_open = !open;
                    cx.notify();
                });
            })
            .child(labels[selected])
            .child(if open { "⌃" } else { "⌄" });
        let options = div()
            .mt_1()
            .p_1()
            .border_1()
            .border_color(super::example_rgb(0x171717))
            .bg(super::example_rgb(0xffffff))
            .children(labels.into_iter().enumerate().map(|(ix, label)| {
                let entity = entity.clone();
                div()
                    .id(("select-option", ix))
                    .px_2()
                    .py_1()
                    .flex()
                    .justify_between()
                    .hover(|this| this.bg(super::example_rgb(0xf5f5f5)))
                    .child(label)
                    .when(ix == selected, |this| this.child("✓"))
                    .on_click(move |_, _, cx| {
                        _ = entity.update(cx, |this, cx| {
                            this.select_index = ix;
                            this.select_open = false;
                            cx.notify();
                        });
                    })
            }));
        if combobox {
            let root = Combobox::new("example-combobox")
                .open(open)
                .w_56()
                .child(trigger);
            Popup::new("example-combobox-options", root)
                .when(open, |this| this.content(options))
                .into_any_element()
        } else {
            let root = Select::new("example-select")
                .open(open)
                .on_open_change({
                    let entity = entity.clone();
                    move |next, _, cx| {
                        _ = entity.update(cx, |this, cx| {
                            this.select_open = next;
                            cx.notify();
                        });
                    }
                })
                .accessibility_label("Framework")
                .w_56()
                .child(trigger);
            Popup::new("example-select-options", root)
                .when(open, |this| this.content(options))
                .into_any_element()
        }
    }
}

可访问性

提供标签，暴露当前值，并保留上下键、Enter、Escape 与类型检索。

注意事项

在支持的位置使用稳定元素 ID，并在消费端设计系统中验证焦点、悬停、按下、选中、禁用、减少动态效果和高对比度状态。