Vaadin GridLayoutのカスタム幅

Question

私はVaadinの2x2 GridLayoutで作業しています。

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

左上隅のセルには、右側に揃えられた簡単なラベルが含まれています。右上のセルには、左に整列したテキストフィールドがあります。 2番目の行には、テキストフィールドの下にラベルが含まれています。

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

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

今、私は私のページの中央に整列し、全体のレイアウトを持っている50％に設定されたサイズを持つようにグリッド内の両方の列を持つようにしたい - 今ではやや左側にシフトしていると私はできません理由を理解してください...

Vaadinのwiki-pageに関連記事がありますが、私はそれをどのように扱うかを理解できません。私は#getColumn（）にアクセスすることができないので、非難されるようです。 - 方法？！ https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths

詳細情報：GridLayoutは、VerticalLayoutとは別のコンポーネントとして追加されています。

Answer 1

ラベルを含む左側の列のHorizo​​ntalLayoutラッパーを追加することによってそれを解決しました。右の列には、他のすべてのコンポーネントを含むVerticalLayoutが含まれています。

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

grid.setColumnExpandRatio(1, 1);メソッドで列の幅に影響を与えることができます。

両方とも50％の幅を使用する場合は、両方の列で同じ比率に拡大率を設定します。

注意： パーセントサイズのコンポーネントを含むレイアウトには、定義されたサイズが必要です。

レイアウトに未定義のサイズがあり、含まれているコンポーネントのサイズが100％の場合、コンポーネントはレイアウトによって与えられたスペースを満たしますが、レイアウトはコンポーネントが取るスペースに合わせて縮小します。パラドックス。この要件は、高さと幅を別々に保持します。

Book of Vaadin