如何在 Vaadin 10 组合框中添加语言标志

Question

如何在 Vaadin 10 Como 框中添加语言标志

Answer 1

您可以使用comboBox.setRenderer() 构建您自己的布局以供使用。

comboBox.setRenderer(new ComponentRenderer<HorizontalLayout, MyLanguageClass>(language -> {
    HorizontalLayout layout = new HorizontalLayout();
    layout.add(new Image(language.getPathToFlag(), language.getName()));
    layout.add(new Label(language.getName()));
    return layout;
}));

这个例子将做一个带有图像和标签的基本水平布局。您当然可以根据自己的需要进一步调整。 我在这里使用了ComponentRenderer，但你也可以使用TemplateRenderer

请注意，除了comboBox.setRenderer() 之外，您仍然必须使用comboBox.setItemLabelGenerator()，因为渲染器不用于所选项目 - 仅用于项目列表。据我所知，目前还没有办法为所选项目使用渲染器。

---

为 Vaadin 13 / Vaadin 14 编辑：
使用 Vaadin 13+，您可以使用组件 Select 来实现您想要的 - 选定的选项也会显示一个标志！

private ComponentRenderer<HorizontalLayout, Locale> languageRenderer = new ComponentRenderer<>(item -> {
    HorizontalLayout hLayout = new HorizontalLayout();
    Image languageFlag = new Image("img/languageflags/"+item.getLanguage()+".png", "flag for "+item.getLanguage());
    languageFlag.setHeight("30px");
    hLayout.add(languageFlag);
    hLayout.add(new Span(getTranslation("LanguageSelection."+item.getLanguage())));
    hLayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);
    return hLayout;
});
private Select<Locale> langSelect;

private Select<Locale> buildLanguageSelection() {
    langSelect = new Select<>();
    langSelect.setEmptySelectionAllowed(false);
    langSelect.setRenderer(this.languageRenderer);
    langSelect.setItems(new Locale("de"), new Locale("fr"), new Locale("en"));
    langSelect.setValue(UI.getCurrent().getLocale());
    langSelect.addValueChangeListener(change -> UI.getCurrent().getSession().setLocale(change.getValue()));
    return langSelect;
}

@Override
public void localeChange(LocaleChangeEvent event) {
    // because the renderer uses `getTranslation()`, this will re-translate the shown values using the new Locale.
    // if langSelect.refreshItems() ever becomes public, use that instead
    langSelect.setRenderer(languageRenderer);
}

编辑 2： 我将 LanguageSelect 类作为附加组件发布在 vaadin repository 中，它基于此代码，但使用起来更简单。仅适用于 Vaadin 14。

LanguageSelect langSelect = new LanguageSelect(
    new Locale("de"), 
    new Locale("fr"), 
    new Locale("en")
);
someLayout.add(langSelect);

---