如何在Vaadin Grid选中行切换上下箭头图标？

要实现点击行切换箭头图标，核心是跟踪每行的展开状态，并在状态变化时刷新图标组件。以下是具体实现方案：

步骤1：定义状态跟踪容器 #

首先需要记录每行的展开状态，用HashMap存储每个Person对象对应的展开状态：

// 类级变量，用于记录每行的展开状态
private final Map<Person, Boolean> expandedStateMap = new HashMap<>();

步骤2：动态生成图标列 #

修改组件列代码，根据当前行的展开状态决定显示向上还是向下箭头：

eventGrid.addComponentColumn(item -> {
    // 默认未展开，获取当前行的展开状态
    boolean isExpanded = expandedStateMap.getOrDefault(item, false);
    // 根据状态选择图标：展开显示angle-up，收起显示angle-down
    Icon arrowIcon = new Icon("lumo", isExpanded ? "angle-up" : "angle-down");
    // 可选：给图标添加鼠标指针样式，提示可点击
    arrowIcon.getStyle().set("cursor", "pointer");
    return arrowIcon;
}).setWidth("6em").setFlexGrow(0);

步骤3：添加行点击事件处理 #

给Grid绑定行点击监听器，切换展开状态、更新图标，并处理额外信息的显示/隐藏：

eventGrid.addItemClickListener(event -> {
    Person clickedPerson = event.getItem();
    // 切换当前行的展开状态
    boolean currentState = expandedStateMap.getOrDefault(clickedPerson, false);
    expandedStateMap.put(clickedPerson, !currentState);

    // 刷新当前行，让图标组件重新渲染完成切换
    eventGrid.getDataProvider().refreshItem(clickedPerson);

    // --- 此处添加你的额外信息显示/隐藏逻辑 ---
    // 比如使用Vaadin内置详情行：
    // eventGrid.setDetailsVisible(clickedPerson, !currentState);
    // 或自定义详情面板逻辑：
    // toggleDetailsPanel(clickedPerson, !currentState);
});

进阶：利用Vaadin内置详情行简化实现 #

如果使用Vaadin Grid的内置详情行功能，可以直接用Grid自带的状态方法，省去手动维护Map的麻烦：

// 配置详情行内容
eventGrid.setItemDetailsRenderer(new ComponentRenderer<>(person -> {
    // 这里是要显示的额外信息组件
    VerticalLayout detailsLayout = new VerticalLayout();
    detailsLayout.add(new Label("邮箱：" + person.getEmail()));
    detailsLayout.add(new Label("地址：" + person.getAddress()));
    return detailsLayout;
}));

// 生成图标列时直接读取Grid的详情可见状态
eventGrid.addComponentColumn(item -> {
    boolean isDetailsVisible = eventGrid.isDetailsVisible(item);
    return new Icon("lumo", isDetailsVisible ? "angle-up" : "angle-down");
}).setWidth("6em").setFlexGrow(0);

// 行点击时切换详情可见性并刷新图标
eventGrid.addItemClickListener(event -> {
    Person person = event.getItem();
    boolean currentVisible = eventGrid.isDetailsVisible(person);
    eventGrid.setDetailsVisible(person, !currentVisible);
    eventGrid.getDataProvider().refreshItem(person);
});

关键说明 #

• refreshItem(item)是核心操作：调用该方法会让Grid重新渲染指定行的组件列，触发图标根据最新状态重新生成。
• Lumo图标集的angle-up和angle-down是Vaadin内置资源，无需额外引入。

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