Controlfx - 评级宽度

Question

我正在使用来自 Controlfx 的 RatingBar。

我想绑定宽度值，但不允许小于 248 的值。

@FXML
private Rating vipRating;

        vipRating.prefWidthProperty().bind(ratingVBox.prefWidthProperty());

Answer 1

你可以这样：

DoubleBinding minPrefBinding = Bindings.createDoubleBinding(() -> {
        if(ratingVBox.getPrefWidth() < 248.0){
            return 248.0;
        }
        return ratingVBox.getPrefWidth();
    }, ratingVBox.prefWidthProperty());

 vipRating.prefWidthProperty().bind(minPrefBinding);

Answer 2

调整minimum width：vipRating.setMinWidth(Region.USE_PREF_SIZE);或vipRating.setMinWidth(0);。

编辑：

查看 ControlsFX 源代码，Rating 控件的外观似乎使用了 PNG 图形。这些图标为 32x32 像素，对齐 5 个星形图标的容器间距为 4。

简单数学：(32 + 4) * 5 - 4 = 176。

176 是此控件可以具有的最小宽度。您可以重写 CSS 并删除间距，这会给您另外 16 像素，所以您最终会得到 160 像素。

显示打印最小尺寸的演示应用程序：

@Override
public void start(Stage primaryStage) throws Exception {
    final Rating rating = new Rating();

    final BorderPane pane = new BorderPane(rating);
    pane.setMaxWidth(Region.USE_PREF_SIZE);

    primaryStage.setScene(new Scene(pane));
    primaryStage.show();

    Platform.runLater(()->System.out.println(rating.getWidth()));

}

如果你真的想删除间距，只需添加以下 CSS 规则：

.rating > .container {
    -fx-spacing: 0;
}

Answer 3

RatingBar 在 CSS 中有一个按钮选择器的填充值：

.rating > .container > .button {
    -fx-background-color: transparent;
    -fx-background-image: url("unselected-star.png");
    -fx-padding: 16 16; 
    -fx-background-image-repeat: no-repeat;
}

我们应该删除这个填充。

.rating > .container .button {
        -fx-background-size: cover;
        -fx-padding: 0; 
    }

我们还应该将 width/height 值应用于按钮而不是评级框。

 .rating > .container .button {
            -fx-pref-width: 20 ;
            -fx-pref-height: 20 ;
            -fx-background-size: cover;
            -fx-padding: 0; 
        }

为了以编程方式完成这项工作，还有另一个未记录的行为：

如果你这样做：

ratingHeigth.bind(mainBorderPane.prefHeightProperty());
    vipRating.styleProperty().bind(Bindings.concat(".rating > .container .button{ -fx-pref-height: ", ratingHeigth.asString(), ";}"));

它不会工作，因为内联样式只是将字符串指定的实际样式应用到您调用的节点 setStyle(...): 内联样式不包括选择器。

所以我们应该在 CSS 文件中创建一个 CSS 变量，如下所示：

.rating {
    button-width: 32;
    button-height: 32;
}

 .rating > .container .button {
                -fx-pref-width: button-width;
                -fx-pref-height: button-height;
                -fx-background-size: cover;
                -fx-padding: 0; 
            }

现在内联样式应该应用于新的 CSS 变量。

ratingWidth.bind(centerPane.prefWidthProperty());
        vipRating.styleProperty().bind(Bindings.concat("button-width: ", ratingWidth.asString(), ";"));

Controlfx - 评级宽度

Controlfx - Rating width

java

javafx

controlsfx