创建一个漂亮的 Codename One 滑块以通知百分比

Question

读者注意：这个问题是针对代号一的，它不是关于 css、html 或类似的。

我的用例是通知用户他/她的个人资料完成了多少。 我需要实现一个像下面这样的滑块，但是在使用Slider component 进行了大量试验之后，我不明白如何实现它。 （老实说，我什至不明白如何开始实现它，也不知道 Slider 组件是否合适。）

此滑块的宽度应等于父窗体的 contentPane。基本上它是一个带有小边框的矩形：根据百分比，矩形的一部分是彩色的，另一部分是白色的。在矩形上，我需要百分比和文本：百分比和文本位于固定位置。文本的颜色会根据背景颜色而变化，如第二张图片所示。

感谢您的帮助。

Answer 1

这很容易，除了颜色变化。该部分需要对图形进行手工编码。我没有运行这段代码，但它应该非常接近它的工作方式：

class ProgressSlider extends Component {
    protected Dimension calcPreferredSize() {
        return new Dimension(convert(getDisplayWidth(), 6));
    }

    public void paint(Graphics g) {
         g.setColor(0xffffff);
         g.fillRect(getX(), getY(), getWidth(), getHeight());
         g.setColor(0);
         Font f = getStyle().getFont();
         g.drawString(progressPercetage, convert(4) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.drawString(progressText, convert(10) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.setColor(RED);
         g.fillRect(getX(), getY(), getWidth() / 100 * progressPercentage, getHeight());
         g.setColor(0xcccccc);
         g.drawRect(getX(), getY(), getWidth() - 1, getHeight() - 1);
         g.clipRect(getX(), getY(), getWidth() / 100 * progressPercentage, getHeight());
         g.setColor(0xffffff);             
         g.drawString(progressPercetage, convert(4) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
         g.drawString(progressText, convert(10) + getX(), getY() + f.getHeight() / 2 + getHeight() - 2);
    }
}

这可能缺少一些细节，例如重置剪辑区域等。我没有运行它，但如果调整正确，它应该会产生几乎相同的结果。文本被绘制了两次（第二次剪切）以复制颜色变化的效果。