使用 Vaadin 隐藏和折叠菜单答案

【问题标题】：Hide and Collapse menu using Vaadin使用 Vaadin 隐藏和折叠菜单
【发布时间】：2023-03-21 11:35:01
【问题描述】：

有谁知道如何使用 vaadin api 创建隐藏和折叠内容。

【问题讨论】：

标签： vaadin

【解决方案1】：

所有组件都继承了 setVisible() 方法，该方法可以触发可见性的开启和关闭。这意味着至少所有组件和组件容器。但是，这在没有动画的情况下发生。如果您喜欢某些动画，则必须依赖附加组件，例如Henrik Paul 的Drawer 做了某种隐藏和显示动画。

这就是你的想法吗？

【讨论】：

【解决方案2】：

我通过使用 vaadin 的 TabSheet 功能实现了它。每当用户单击“-”选项卡时，我创建了两个选项卡“+”和“-”它将 TabSheet 高度设置为 100%，并且每当用户单击“+” ' Tab 我将 TabSheet 的高度设置为 20%（tabsheet 的可见高度），因此无论 TabSheet 中的内容如何，都将隐藏在用户视角中。

     // Create an empty tab sheet.
    TabSheet tabsheet = new TabSheet();


    // Defining Vertical Layout for Tab 1 content
    final VerticalLayout verLayout1 = new VerticalLayout();


       // Tab 2 content
    VerticalLayout verLayout2 = new VerticalLayout();
    verLayout2.setSizeUndefined();
    verLayout2.setMargin(true);

    tabsheet.addTab(verLayout1, "+", null);
    tabsheet.addTab(verLayout2, "-", null);
    tabsheet.addListener(listenerForTab());




      /**
   * Method to handle tab sheet hide/show event
   * 
   * @return TabSheet.SelectedTabChangeListener
   */
  public TabSheet.SelectedTabChangeListener listenerForTab() {
    _logger.info("Entering in to tabChangeListener of WizardUtil");
    // Instance of TabSheet.SelectedTabChangeListener
    TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
      public void selectedTabChange(SelectedTabChangeEvent event) {
        TabSheet tabsheet = event.getTabSheet();
        Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
        // Tab content displayed on setting height to the tab sheet
        if(tab.getCaption().equals("+")) {
          tabsheet.setHeight("100%");
        } else {
          tabsheet.setHeight("33px");
        }
      }
    };
    _logger.info("Exiting from tabChangeListener of WizardUtil");
    return listener;
  }

【讨论】：