Vaadin 7.6.3进度条：如何调整厚度及显示进度数值？

针对你遇到的ProgressBar高度无法调整、进度数值无法居中显示的问题，我来给你分步解决：

一、调整ProgressBar的高度（厚度） #

Vaadin 7的ProgressBar组件有多层DOM结构，直接调用setHeight()或者给组件加styleName只作用于外层容器，不会影响实际进度条的厚度。你需要针对内部的CSS类进行样式覆盖：

1. 首先给你的ProgressBar添加自定义样式名：

_progress.addStyleName("custom-progress");

2. 在你的主题CSS文件中添加如下样式，通过控制.v-progressbar-wrap的高度和.v-progressbar-fill的高度来调整厚度：

.custom-progress .v-progressbar-wrap {
    height: 30px; /* 这里设置你想要的进度条整体高度 */
}

.custom-progress .v-progressbar-fill {
    height: 100%; /* 让填充部分占满外层高度，也可以单独设置数值 */
}

这样就能真正改变进度条的厚度了，注意要确保你的主题样式能正确加载到Vaadin应用中。

二、在进度条中间显示已完成/剩余数值 #

用Caption的方式很难把文字放在进度条内部居中，推荐两种方案：

方案1：使用布局嵌套，叠加Label #

把ProgressBar和一个Label放在同一个AbsoluteLayout里，让Label居中显示在进度条上方：

AbsoluteLayout progressContainer = new AbsoluteLayout();
progressContainer.setWidth("100%");
progressContainer.setHeight("30px"); // 和进度条高度一致

// 初始化ProgressBar并添加样式
ProgressBar _progress = new ProgressBar();
_progress.setWidth("100%");
_progress.setHeight("100%");
_progress.addStyleName("custom-progress");
progressContainer.addComponent(_progress);

// 创建显示数值的Label
Label progressLabel = new Label();
progressLabel.setStyleName("progress-label");
// 计算进度数值，比如当前进度是0.6，总进度100的话
double progressValue = _progress.getValue();
int completed = (int) (progressValue * 100);
int remaining = 100 - completed;
progressLabel.setValue(completed + "% 完成，剩余 " + remaining + "%");
progressContainer.addComponent(progressLabel);
// 设置Label居中
progressContainer.setComponentPosition(progressLabel, "left: 50%; top: 50%; transform: translate(-50%, -50%);");

// 把容器添加到你的页面布局中
yourMainLayout.addComponent(progressContainer);

对应的CSS样式，让Label文字不被进度条遮挡且样式美观：

.progress-label {
    color: #fff; /* 白色文字，适配深色进度条，可根据你的进度条颜色调整 */
    font-weight: bold;
    pointer-events: none; /* 让点击穿透到进度条，不影响交互 */
}

方案2：扩展ProgressBar组件（更优雅） #

如果你希望组件复用性更高，可以自定义一个ProgressBar组件，在内部添加数值显示：

public class ProgressBarWithLabel extends ProgressBar {
    private Label label;

    public ProgressBarWithLabel() {
        super();
        initLabel();
    }

    public ProgressBarWithLabel(double value) {
        super(value);
        initLabel();
    }

    private void initLabel() {
        label = new Label();
        label.setStyleName("progress-inner-label");
        // 把Label添加到ProgressBar的根布局中
        ((AbstractComponentContainer) getCompositionRoot()).addComponent(label);
        updateLabel();
        // 监听进度值变化，实时更新标签
        addValueChangeListener(event -> updateLabel());
    }

    private void updateLabel() {
        double value = getValue();
        int completed = (int) (value * 100);
        int remaining = 100 - completed;
        label.setValue(completed + "% / " + remaining + "%");
    }
}

然后对应的CSS样式，让Label居中：

.custom-progress .progress-inner-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    pointer-events: none;
}

.custom-progress .v-progressbar-wrap {
    position: relative; /* 让内部Label的绝对定位基于这个容器 */
    height: 30px;
}

使用这个自定义组件的时候，同样添加custom-progress样式名即可。

为什么你之前的代码不生效？ #

• 直接调用setHeight("100%")：ProgressBar的外层容器会占满父容器，但内部的进度条元素（.v-progressbar-wrap）还是使用默认高度，所以看起来没变化。
• 你的CSS.progress1样式：没有针对ProgressBar的内部DOM结构，只是作用于外层组件，所以无法改变进度条厚度，而且Caption是在组件外部，无法居中显示在进度条中间。

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