Мне требуется неправильное выравнивание

1

У меня есть следующий фрагмент кода, который я написал. Я пытаюсь сосредоточить оба текста один за другим в панели следующим образом:

                            Your name is:
                                  1

Может ли кто-нибудь сказать мне, как это сделать?

Спасибо.

Код:

        VerticalLayout layout1 = new VerticalLayout();
        layout.setSizeFull();
        layout1.setSizeFull();
        Label label = new Label("Your name is: ");
        label.setStyleName(Runo.LABEL_H1);
        Label label1 = new Label(name);
        label1.setStyleName(Runo.LABEL_H1);
        layout1.addComponent(label);

        layout1.addComponent(label1);
        layout1.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
        layout1.setComponentAlignment(label1, Alignment.MIDDLE_CENTER);
        layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

        setContent(layout);
        panel.setContent(layout1);

Вывод:

Изображение 174551

Теги:
vaadin

1 ответ

5
Лучший ответ

Ярлыки в Vaadin имеют ширину по умолчанию 100%, что означает, что компонент Label заполняет все горизонтальное пространство, не оставляя места для выравнивания. Причиной этого по умолчанию является то, что в большинстве случаев вы захотите, чтобы текст обернулся, когда достигнет края родительского компонента.

Чтобы label.setWidth(null); метки в коде, просто установите их ширину в undefined, выполнив label.setWidth(null);

Резонанс для дополнительного вертикального пространства находится в VerticalLayout. Поскольку вы установили для него высоту экспирации, но не указали каких-либо коэффициентов расширения для слотов, это делает оба слота одинаково высокими; на половину высоты каждой компоновки. Чтобы обойти это, вы можете сделать одну из двух вещей: избавиться от высоты в layout1, заменив вызов layout1.setSizeFull(); с layout1.setWidth("100%"); -Или установить коэффициент расширения для второго интервала, выполнив layout1.setExpandRatio(label1, 1); , Установка отношения расширения приведет к тому, что макет будет использовать все дополнительное пространство во втором слоте, оставив две метки ближе друг к другу.

setExpandRatio помощью setExpandRatio вы также должны изменить выравнивание label1 от MIDDLE_CENTER до TOP_CENTER, чтобы пустое место помещалось ниже метки и не равномерно вокруг него.

  • 0
    Эй, спасибо большое, что помогло центрировать текст, но я не могу избавиться от пустого пространства между ними. ты можешь помочь мне с этим?
  • 0
    Я добавил информацию об этом в ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню