在视图中格式化问题 - Vaadin

Question

我创建了一个视图如下：

菜单布局或左侧垂直布局没有整个布局填充蓝色。它只有蓝色，直到相应的按钮存在。

我需要将整个菜单布局设置为蓝色，并将按钮保持在与现在相同的位置。因此，要实现它，我在视图中取消注释下面的代码

menuLayout.setSizeFull();

menuLayout.setSizeFull();

但整个菜单布局变得非常糟糕，如下所示。请看下面的快照

有人可以帮忙吗？

使用的代码如下：

public class AppointmentView  extends CustomComponent implements View,Button.ClickListener {


private static final long serialVersionUID = 1L;
public static final String NAME = "Appointment";
private VerticalLayout mainLayout = new VerticalLayout();
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
private Button newContact = new NativeButton("Add contact");
private Button search = new NativeButton("Search");
private Button share = new NativeButton("Share");
private Button help = new NativeButton("Help");
private NavigationTree tree = new NavigationTree();

public AppointmentView()    {
    setSizeFull();
    upperSection.addComponent(new Label(""));
    menuLayout.addComponent(new Label(""));
    contentLayout.addComponent(new Label(""));  
    menuLayout.setSpacing(true);
    //menuLayout.setSizeFull();
    menuLayout.setStyleName(Reindeer.LAYOUT_BLUE);
    lowerSection.addComponent(menuLayout);
    lowerSection.addComponent(contentLayout);
    lowerSection.setSizeFull();
    upperSection.setStyleName(Reindeer.LAYOUT_BLUE);
    upperSection.addComponent(createToolbar());
    lowerSection.setSplitPosition(30);
    menuLayout.addComponent(createVerticalToolbar());
    mainLayout.addComponent(upperSection);
    mainLayout.addComponent(lowerSection);
    mainLayout.setSizeFull();
    mainLayout.setExpandRatio(lowerSection, 1);
    setCompositionRoot(mainLayout);
}

private Component createToolbar() {
    HorizontalLayout layout = new HorizontalLayout();
    Embedded em = new Embedded("", new ClassResource("../../com/image/logo.png"));
    layout.addComponent(em);
    layout.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
    layout.setExpandRatio(em, 1);
    layout.setStyleName("toolbar");
    layout.setMargin(true);
    layout.setSpacing(true);
    layout.setWidth("100%");
    return layout;
}

@SuppressWarnings("deprecation")
private Component createVerticalToolbar() {
    VerticalLayout lo = new VerticalLayout();
    newContact.setStyleName("img");
    newContact.setWidth("100%");
    newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
    newContact.addListener((Button.ClickListener) this);
    lo.addComponent(newContact);
    search.setIcon(new ClassResource("../../com/image/folder-add.png"));
    search.addListener((Button.ClickListener) this);
    search.setWidth("100%");
    lo.addComponent(search);
    share.setIcon(new ClassResource("../../com/image/users.png"));
    share.addListener((Button.ClickListener) this);
    share.setWidth("100%");
    lo.addComponent(share);
    help.setIcon(new ClassResource("../../com/image/help.png"));
    help.addListener((Button.ClickListener) this);
    help.setWidth("100%");
    lo.addComponent(help);

    lo.setMargin(true);
    lo.setSpacing(true);
    lo.setWidth("100%");
    lo.setSizeFull();
    return lo;
}

public void buttonClick(ClickEvent event) {
    final Button source = event.getButton();
    if (source == search) {
        Notification.show("Search hit");
    } else if (source == newContact) {
        Notification.show("New contact");
    } else if (source == help) {
        Notification.show("Help");
    } else if (source == share) {
        Notification.show("Share");
    }
}

@Override
public void enter(ViewChangeEvent event) {
    // TODO Auto-generated method stub

}

}

Answer 1

您为左侧菜单嵌套了两个VerticalLayouts。

当您希望填充整个高度时，将高度设置为100％是正确的方法。

VerticalLayout通常在组件之间分配空间。 如果您不希望这样，那么您可以设置扩展比例来告诉它哪个组件应该占用多少空间。

在构造函数中，将调用createVerticalToolbar的行更改为：

.....
createVerticalToolbar(menuLayout);
.....




private void createVerticalToolbar(VerticalLayout lo) {
    newContact.setStyleName("img");
    newContact.setWidth("100%");
    newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
    newContact.addListener((Button.ClickListener) this);
    lo.addComponent(newContact);
    search.setIcon(new ClassResource("../../com/image/folder-add.png"));
    search.addListener((Button.ClickListener) this);
    search.setWidth("100%");
    lo.addComponent(search);
    share.setIcon(new ClassResource("../../com/image/users.png"));
    share.addListener((Button.ClickListener) this);
    share.setWidth("100%");
    lo.addComponent(share);
    help.setIcon(new ClassResource("../../com/image/help.png"));
    help.addListener((Button.ClickListener) this);
    help.setWidth("100%");
    lo.addComponent(help);

    // Add new component which uses up the remaining space
    Label lbl= new Label("About");
    lo.addComponent(lbl);    
    lo.setExpandRatio(help, 20);

    lo.setMargin(true);
    lo.setSpacing(true);
    lo.setWidth("100%");
    lo.setSizeFull();
    return lo;
}