如何在Dioxus桌面应用中检测Shift键按下实现批量勾选复选框？

要实现按住Shift键批量勾选复选框的功能，无需依赖额外crate，直接利用Dioxus的事件系统监听全局键盘事件即可。核心思路是在组件内维护Shift键的响应式状态，通过容器的onkeydown和onkeyup事件更新状态，再在复选框的点击逻辑中使用该状态。

修改后的完整代码 #

#[component]
fn ChangeList(changes: Signal<Vec<ChangeItemInfo>>) -> Element {
    let mut last_clicked = use_signal(|| 0);
    // 用Signal维护Shift键状态，初始为未按下
    let shift_pressed = use_signal(|| false);

    let mut group_select = move |just_clicked: usize, check: bool| {
        let first = std::cmp::min(just_clicked, *last_clicked.read());
        let last = std::cmp::max(just_clicked, *last_clicked.read());
        println!("Group Selecting from {first} to {last}");
        changes.write().iter_mut().skip(first).take(last - first + 1).for_each(|c| c.checked = check);
    };

    rsx! {
        div {
            class: "change-list",
            // 监听容器的键盘按下/释放事件，更新Shift状态
            onkeydown: move |evt: KeyboardEvent| {
                if evt.key() == "Shift" {
                    shift_pressed.set(true);
                }
            },
            onkeyup: move |evt: KeyboardEvent| {
                if evt.key() == "Shift" {
                    shift_pressed.set(false);
                }
            },

            header {
                if changes.read().len() == 0 {
                    p {"No changes found"}
                } else {
                    label { class: "checkbox_container",
                        input { r#type: "checkbox", checked:"false",
                            onchange: move |evt: FormEvent| {
                                let checked = evt.value() == "true";
                                changes.write().iter_mut().for_each(|c| c.checked = checked);
                            },
                        }
                        span { class: "checkmark" }
                    }
                    p {"{changes.read().len()} Changed Files"}
                }
            }

            ul {
                for (index, change) in changes.read().iter().enumerate() {
                    li { title: "{&change.change}", key: "{&change:?}",
                        label { class: "checkbox_container",                            
                            input { r#type: "checkbox", checked:"{change.checked}",
                                onchange: move |evt: FormEvent| {
                                    let checked = evt.value() == "true";

                                    // 读取当前Shift键的实时状态
                                    if *shift_pressed.read() {
                                        group_select(index, checked);
                                    } else if let Some(c) = changes.write().get_mut(index) {
                                        c.checked = checked;
                                    }

                                    last_clicked.set(index);
                                },
                            }
                            span { class: "checkmark" }
                        }
                        p {"{change.change.path.file_name().unwrap().to_string_lossy()}"}
                        div { display:"flex", gap:"0.5rem", margin_left:"auto",
                            if change.conflict { img { src: mg!(file("assets/code_pull_request.svg")) } }
                            if change.change.r#type == ChangeType::New { img { src: mg!(file("assets/new.svg")) } }
                            if change.change.r#type == ChangeType::Modified { img { src: mg!(file("assets/modified.svg")) } }
                            if change.change.r#type == ChangeType::Deleted { img { src: mg!(file("assets/deleted.svg")) } }
                        }
                    }
                }
            }
        }
    }
}

关键说明 #

• Shift状态维护：使用use_signal(|| false)创建响应式状态，确保状态变化时组件能自动更新UI逻辑。
• 全局键盘监听：在最外层的div上绑定onkeydown和onkeyup事件，只要应用窗口处于活跃状态，就能捕获Shift键的按下/释放动作，无需依赖复选框获得焦点。
• 状态读取：在复选框的onchange回调中，通过shift_pressed.read()获取Shift键的实时状态，触发对应的批量选择或单个勾选逻辑。

内容的提问来源于stack exchange，提问作者crfellows