在Rust的Dioxus中获取元素属性（含宽高px值）

要获取使用百分比CSS的元素实际像素宽高，你可以通过Dioxus的节点引用结合web平台的DOM API实现，全程用Rust代码完成，无需编写JavaScript：

核心步骤 #

• 用use_node_ref创建元素引用，绑定到目标div
• 在元素挂载后（通过use_effect触发），获取元素的BoundingClientRect，从中提取渲染后的像素尺寸
• 用状态变量存储尺寸，方便组件内使用

完整代码示例 #

use dioxus::prelude::*;
use web_sys::Element;

fn app(cx: Scope) -> Element {
    // 创建节点引用，用于关联目标div
    let div_ref = use_node_ref(cx);
    // 存储元素宽高的状态变量
    let (width, set_width) = use_state(cx, || 0.0);
    let (height, set_height) = use_state(cx, || 0.0);

    // 元素挂载后执行尺寸获取逻辑
    use_effect(cx, &div_ref, |div_ref| {
        // 确保元素已挂载到DOM
        let Some(element) = div_ref.get::<Element>() else {
            return async move {};
        };

        // 获取渲染后的元素边界矩形，提取像素宽高
        let rect = element.get_bounding_client_rect();
        set_width(rect.width());
        set_height(rect.height());

        async move {}
    });

    cx.render(rsx! {
        div {
            class: "some_class",
            // 将节点引用绑定到当前div
            ref: div_ref,
            p { "实际宽度: {width}px, 实际高度: {height}px" }
        }
    })
}

关键说明 #

• use_node_ref：Dioxus提供的钩子，用于获取DOM元素的引用，是连接Rust组件和底层DOM的桥梁
• use_effect：依赖div_ref触发，确保只有当元素挂载到DOM后才执行尺寸获取，避免获取到无效值
• get_bounding_client_rect()：返回元素的实际渲染边界，其中的width和height属性就是最终的像素值，不受CSS百分比单位影响
• 动态尺寸适配：如果元素尺寸会随窗口大小、内容变化而改变，可以在use_effect中监听resize事件或使用MutationObserver，重新获取尺寸，逻辑同样用Rust实现

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