如何在Vaadin 8中无需CSS将Checkbox、Radiobuttons和Slider标题文本左置

嘿，这个问题我在Vaadin 8项目里处理过好多次了，不用CSS完全能实现，分组件给你说具体操作：

Checkbox（复选框） #

Vaadin 8的Checkbox继承自AbstractField，自带了调整标题位置的API，直接调用setCaptionPosition方法就能把标题放到左侧：

import com.vaadin.ui.Checkbox;
import com.vaadin.ui.CaptionPosition;

// 创建复选框并设置标题位置
Checkbox termsCheckbox = new Checkbox("同意服务条款");
termsCheckbox.setCaptionPosition(CaptionPosition.LEFT);

Radiobuttons（单选按钮） #

不管是单个RadioButton还是RadioButtonGroup，同样可以用setCaptionPosition方法来调整标题位置：

单个单选按钮 #

import com.vaadin.ui.RadioButton;
import com.vaadin.ui.CaptionPosition;

RadioButton maleRadio = new RadioButton("男");
maleRadio.setCaptionPosition(CaptionPosition.LEFT);

单选按钮组 #

import com.vaadin.ui.RadioButtonGroup;
import com.vaadin.ui.CaptionPosition;

RadioButtonGroup<String> genderGroup = new RadioButtonGroup<>("选择性别");
genderGroup.setItems("男", "女");
genderGroup.setCaptionPosition(CaptionPosition.LEFT);

Slider（滑块） #

Slider组件默认的标题布局不太支持直接通过API调整到左侧，我们可以用HorizontalLayout手动组合标题标签和滑块组件，实现标题在左的效果：

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Slider;
import com.vaadin.ui.Alignment;

// 创建布局容器
HorizontalLayout sliderContainer = new HorizontalLayout();

// 标题标签
Label volumeLabel = new Label("音量调节");
// 滑块组件
Slider volumeSlider = new Slider(0, 100);
volumeSlider.setValue(50); // 设置默认值

// 添加组件到布局，并调整对齐方式
sliderContainer.addComponents(volumeLabel, volumeSlider);
sliderContainer.setComponentAlignment(volumeSlider, Alignment.MIDDLE_LEFT);
sliderContainer.setSpacing(true); // 给组件之间加间距

这样处理后，三个组件的标题都能乖乖待在左侧，完全不需要写任何CSS样式~

内容的提问来源于stack exchange，提问作者petmik