Benutzerdefinierte Breite von Vaadin GridLayout

Question

Ich arbeite mit einem 2x2 GridLayout in Vaadin.

gridLayout = new GridLayout(2, 2); 
     gridLayout.setWidth(100, Unit.PERCENTAGE); 
     gridLayout.setMargin(true); 
     gridLayout.setSpacing(true); 

Die Zelle in der oberen linken Ecke enthält eine einfache Beschriftung, die nach rechts ausgerichtet ist. Die obere rechte Zelle enthält ein Textfeld, das nach links ausgerichtet ist. Die zweite Zeile enthält einfach eine Beschriftung unterhalb des Textfelds.

gridLayout.addComponent(captionLabel, 0, 0); 
    gridLayout.addComponent(inputField, 1, 0); 

    gridLayout.setComponentAlignment(captionLabel, Alignment.MIDDLE_RIGHT); 
    gridLayout.setComponentAlignment(inputField, Alignment.MIDDLE_LEFT); 

Jetzt habe ich beiden Spalten innerhalb des Gitters haben will Größe auf 50% zu haben, das gesamte Layout in der Mitte meiner Seite ausgerichtet hat - jetzt ist es leicht verschoben auf die linke Seite und ich kann nicht finde heraus, warum ...

Vaadins Wiki-Seite zeigt einen verwandten Artikel, aber ich kann nicht herausfinden, wie man damit arbeitet. Scheint veraltet zu sein, weil ich nicht auf #getColumn() zugreifen kann; - Methode?! https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths

Weitere Informationen: Das GridLayout wird als separate Komponente zu einem VerticalLayout hinzugefügt.

Answer 1

es gelöst einen Horizontallayout-Wrapper für die linke Spalte, indem das Etikett enthält. Die rechte Spalte enthält ein VerticalLayout mit allen anderen Komponenten.

Label captionLabel = new Label(localized); 
    captionLabel.setSizeUndefined(); 
    HorizontalLayout wrapper = new HorizontalLayout(); 
    wrapper.setSizeFull(); 
    wrapper.addComponent(captionLabel); 
    wrapper.setComponentAlignment(captionLabel, Alignment.TOP_RIGHT); 
    [...]   
    gridLayout.addComponent(wrapper, 0, 0); 
    gridLayout.addComponent(inputLayout, 1, 0); 
    gridLayout.setColumnExpandRatio(0, (float)0.5); 
    gridLayout.setColumnExpandRatio(1, (float)0.5); 

Answer 2

Sie können die Spaltenbreite mit der Methode grid.setColumnExpandRatio(1, 1); beeinflussen.

Wenn Sie beide 50% der Gesamtbreite verwenden möchten, legen Sie das Aufstockungsverhältnis für beide Spalten auf denselben Wert fest.

Bitte beachten Sie auch: Ein Layout, das Komponenten mit prozentueller Größe enthält, muss eine definierte Größe haben!

Wenn ein Layout eine nicht definierte Größe hat und eine enthaltene Komponente beispielsweise eine Größe von 100% hat, würde die Komponente den vom Layout vorgegebenen Platz einnehmen, während das Layout verkleinert werden würde ein Paradox. Diese Anforderung gilt für Höhe und Breite getrennt.

Book of Vaadin