ZXingVaadin Addon组件不显示，尺寸为0x0问题求助

我尝试用ZXingVaadin Addon实现二维码扫描功能，已在pom.xml导入对应依赖，编写代码如下：

public ZXingVaadinReader zXingVaadin;
FlexLayout flexLayout;

public FlexLayout getQRScanButton() {
    flexLayout = new FlexLayout();
    Div div = new Div();
    div.getStyle().set("height", "100px").set("width", "100px").set("background-color", "grey");
    div.add(getzXingVaadinReader());
    flexLayout.add(div);
    flexLayout.setId("outerQRDiv");

    return flexLayout;
}

private ZXingVaadinReader getzXingVaadinReader() {
    zXingVaadin = new ZXingVaadinReader();
    zXingVaadin.setFrom(Constants.From.camera);
    zXingVaadin.setId("video");
    return zXingVaadin;
}

并在MainView中添加组件：

QrScanButton qrScanButton = new QrScanButton();
add(qrScanButton.getQRScanButton());

但最终仅显示一个0x0尺寸的空组件，无法正常显示扫描界面。以下是排查和解决方法：

• 给组件设置明确尺寸：ZXingVaadinReader默认没有宽高，需要让它填充父容器。在getzXingVaadinReader()方法中添加：

  zXingVaadin.setSizeFull();
  

  这样组件会占满父Div的100x100空间。

• 确保摄像头权限获取：浏览器仅允许安全上下文（HTTPS或localhost开发环境）访问摄像头。生产环境需部署在HTTPS下，开发环境直接用localhost即可，同时要确保用户授权了摄像头访问权限。

• 延迟启动扫描：组件需附加到DOM后再启动扫描，避免初始化时机问题。添加附加监听器：

  zXingVaadin.addAttachListener(event -> {
      zXingVaadin.startScan();
  });
  

• 检查依赖兼容性：确认ZXingVaadin版本与你的Vaadin版本匹配，比如Vaadin 24需要对应支持24版本的Addon包，避免因版本不兼容导致组件无法渲染。

• 查看浏览器控制台错误：按F12打开浏览器开发者工具，切换到Console标签页，查看是否有JS加载失败、权限报错等信息，这些往往是问题的关键。

修改后的完整getzXingVaadinReader()方法示例：

private ZXingVaadinReader getzXingVaadinReader() {
    zXingVaadin = new ZXingVaadinReader();
    zXingVaadin.setFrom(Constants.From.camera);
    zXingVaadin.setId("video");
    // 让组件占满父容器
    zXingVaadin.setSizeFull();
    // 组件附加到页面后启动扫描
    zXingVaadin.addAttachListener(event -> {
        zXingVaadin.startScan();
    });
    // 监听扫描结果
    zXingVaadin.addScanResultListener(result -> {
        System.out.println("扫描到的内容：" + result);
        // 这里添加结果处理逻辑
    });
    return zXingVaadin;
}

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