Question

我正在使用Controlfx中的RatingBar。

我想绑定宽度值，但它不允许是一个值＆lt; 248。

@FXML
private Rating vipRating;

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

Answer 1

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; 
    }

我们还应该将宽度/高度值应用于按钮而不是评级框。

 .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(), ";"));

Answer 2

你可以这样：

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

 vipRating.prefWidthProperty().bind(minPrefBinding);

Answer 3

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

编辑：

调查ControlsFX Source似乎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;
}

Controlfx - 额定宽度

3 个答案: