如何在 Vaadin 10 Como 框中添加语言标志
最佳答案
您可以使用 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;
}));
此示例将使用图像和标签执行基本的 HorizontalLayout。您当然可以根据需要进一步调整。 我用了 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);
关于vaadin - 如何在 Vaadin 10 组合框中添加语言标志,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53763178/