vaadin -基本布局-选择选项卡后更改内容

// 导入Vaadin相关的类
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.accordion.AccordionPanel;

// 创建垂直布局
VerticalLayout layout = new VerticalLayout();

// 创建选项卡组件
Tabs tabs = new Tabs();

// 创建选项卡并添加到选项卡组件
Tab tab1 = new Tab("选项卡1");
Tab tab2 = new Tab("选项卡2");
tabs.add(tab1, tab2);

// 创建内容组件
VerticalLayout content1 = new VerticalLayout();
VerticalLayout content2 = new VerticalLayout();

// 创建折叠面板组件
AccordionPanel panel1 = new AccordionPanel();
AccordionPanel panel2 = new AccordionPanel();

// 设置折叠面板的标题和内容
panel1.setSummaryText("选项卡1内容");
panel1.setContent(content1);

panel2.setSummaryText("选项卡2内容");
panel2.setContent(content2);

// 将折叠面板添加到垂直布局中
layout.add(panel1, panel2);

// 监听选项卡的选择事件，并根据选择的选项卡切换显示内容
tabs.addSelectedChangeListener(event -> {
    if (event.getSelectedTab() == tab1) {
        panel1.setOpened(true);
        panel2.setOpened(false);
    } else if (event.getSelectedTab() == tab2) {
        panel1.setOpened(false);
        panel2.setOpened(true);
    }
});

// 将选项卡和垂直布局添加到页面中
add(tabs, layout);