Vaadin 7.6.3进度条标题排版问题求助（Groovy脚本）

我之前在Vaadin 7.x项目里折腾过类似的ProgressBar标题样式问题，结合7.6.3的版本特性，给你几个靠谱的解决方案：

方案1：自定义CSS样式（最贴合Vaadin规范） #

Vaadin 7的组件样式可以通过主题CSS或自定义样式类调整，这是最稳定的方式。针对你的需求，我们可以给ProgressBar添加自定义样式，再通过CSS覆盖默认行为：

Groovy代码部分 #

ProgressBar progressBar = new ProgressBar()
// 先设置基础标题，后续用CSS处理样式
progressBar.setCaption("进度标题")
// 添加自定义样式类，方便CSS定位
progressBar.addStyleName("custom-progress")
// 开启HTML模式，方便后续处理加粗或特殊字符（可选，若用CSS加粗则可省略）
progressBar.setCaptionAsHtml(true)

CSS样式部分（放到你的Vaadin主题CSS文件中，比如styles.css） #

/* 让标题居右并移到进度条下方 */
.custom-progress .v-caption {
    float: right;
    clear: both;
    /* 直接实现标题加粗 */
    font-weight: bold;
}

/* 处理前置空格：用padding比 更可控 */
.custom-progress .v-caption-text {
    padding-left: 24px; /* 数值按需调整 */
}

如果一定要用 ，确保setCaptionAsHtml(true)已开启，且标题内容未被转义：progressBar.setCaption("  进度标题")，但CSS padding的方式更稳定。

方案2：用布局组件完全自定义标题（灵活性拉满） #

如果CSS方式不够灵活，可以用布局包裹ProgressBar和自定义Label，彻底脱离组件自带的caption机制：

// 创建垂直布局，控制进度条和标题的排列顺序
VerticalLayout progressContainer = new VerticalLayout()
progressContainer.setSpacing(false)
progressContainer.setMargin(false)

// 初始化进度条，不需要设置自带caption
ProgressBar progressBar = new ProgressBar()
progressContainer.addComponent(progressBar)

// 创建自定义标题Label
Label customCaption = new Label()
// 前置空格+加粗，用HTML模式实现
customCaption.setValue("&nbsp;&nbsp;<b>进度标题</b>")
customCaption.setContentMode(ContentMode.HTML)
// 设置标题居右
customCaption.setStyleName("v-align-right")
// 把标题加到进度条下方
progressContainer.addComponent(customCaption)

// 将布局添加到页面
addComponent(progressContainer)

这种方式可以给标题添加任意样式，甚至嵌套其他组件，完全自定义布局。

方案3：修正setCaptionAsHtml的用法（解决 无效问题） #

如果你坚持用组件自带的caption，先检查setCaptionAsHtml(true)的调用时机，确保它在设置caption之前执行，避免内容被自动转义：

ProgressBar progressBar = new ProgressBar()
// 必须先开启HTML模式，再设置带HTML标签的标题
progressBar.setCaptionAsHtml(true)
// 直接写入带 和加粗标签的内容
progressBar.setCaption("&nbsp;&nbsp;<b>进度标题</b>")
// 用CSS调整标题位置（参考方案1的CSS）
progressBar.addStyleName("caption-below-right")

对应的CSS：

.caption-below-right .v-caption {
    float: right;
    clear: both;
}

如果页面上显示 而不是空格，说明内容被转义了，此时可以尝试手动拼接原始HTML字符串，或用方案1的CSS padding替代。

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