创建一个不错的Codename One滑块以通知百分比

Question

给读者的注释：这个问题专门针对代号One，与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);
    }
}

这可能会丢失一些细节，例如重置剪切区域等。我没有运行它，但是如果正确调整，它应该会产生很多结果。文本被绘制两次（第二次带有剪切）以复制变色效果。