JavaFX CSS中-fx-padding和-fx-label-padding有什么区别？

Question

在JavaFX CSS中，一个Label似乎有两个CSS padding属性。 Label具有Labeled的所有属性，在此之下我们有-fx-label-padding。

然而，Labeled也拥有Control的所有属性，Control又拥有Region的所有属性。在这之下，我们发现了-fx-padding。

对我来说，这两个属性似乎做的是完全一样的事情。有人能解释一下它们之间的区别，为什么我们需要两个，并且在何时更喜欢其中一个？

- cyqsimon

Answer 1

-fx-label-padding 是专门用于 RadioButton 和 CheckBox 的。下面是一个简单的 MCVE，展示了其作用:

public class MainApp extends Application {

   /*
    * (non-Javadoc)
    * @see javafx.application.Application#start(javafx.stage.Stage)
    */
   @Override
   public void start(Stage primaryStage) throws Exception {
      BorderPane root = new BorderPane();
      root.getStylesheets().add(this.getClass().getResource("MyPadding.css").toExternalForm());
      Line line1 = new Line(-1, 1, 1, -1);
      Line line2 = new Line(-1, -1, 1, 1);

      HBox hb = new HBox(20.0);
      // Labels
      VBox vbLabels = new VBox(10.0);
      Label label = new Label("Hello no padding");
      label.setGraphic(Shape.union(line1, line2));
      label.getStyleClass().add("no-padding");
      Label label1 = new Label("Hello padding");
      label1.setGraphic(Shape.union(line1, line2));
      label1.getStyleClass().add("only-padding");
      Label label2 = new Label("Hello label-padding");
      label2.setGraphic(Shape.union(line1, line2));
      label2.getStyleClass().add("only-label-padding");
      Label label3 = new Label("Hello both paddings");
      label3.setGraphic(Shape.union(line1, line2));
      label3.getStyleClass().add("both-padding");
      vbLabels.getChildren().addAll(label, label1, label2, label3);

      // Radio buttons
      VBox vbRadios = new VBox(10.0);
      RadioButton radio = new RadioButton("Radio no padding");
      radio.getStyleClass().add("no-padding");
      RadioButton radio1 = new RadioButton("Radio only padding");
      radio1.getStyleClass().add("only-padding");
      RadioButton radio2 = new RadioButton("Radio label-padding");
      radio2.getStyleClass().add("only-label-padding");
      RadioButton radio3 = new RadioButton("Radio both paddings");
      radio3.getStyleClass().add("both-padding");
      vbRadios.getChildren().addAll(radio, radio1, radio2, radio3);

      // Checkboxes
      // Due to the bug (found in https://bugs.openjdk.java.net/browse/JDK-8089059) it is not really demonstrative.
      VBox vbChecks = new VBox(10.0);
      CheckBox check = new CheckBox("My Check 0");
      check.getStyleClass().add("no-padding");
      CheckBox check1 = new CheckBox("My Check 1");
      check1.getStyleClass().add("only-padding");
      CheckBox check2 = new CheckBox("My Check 2");
      check2.getStyleClass().add("only-label-padding");
      CheckBox check3 = new CheckBox("My Check 3");
      check3.getStyleClass().add("both-padding");
      vbChecks.getChildren().addAll(check, check1, check2, check3);

      hb.getChildren().addAll(vbLabels, vbRadios, vbChecks);
      root.setCenter(hb);
      Scene scene = new Scene(root, 600.0, 500.0);
      primaryStage.setScene(scene);
      primaryStage.show();
   }

   public static void main(String[] args) {
      launch(args);
   }

}

并且CSS文件名为 MyPadding.css ：

.no-padding {
    -fx-border-color: black;
    -fx-label-padding: 0 0 0 0;
    -fx-padding : 0 0 0 0;
}

.only-padding {
    -fx-border-color : red;
    -fx-label-padding: 0 0 0 0em;
    -fx-padding : 0 0 0 2em;
}

.only-label-padding {
    -fx-border-color: blue;
    -fx-label-padding: 0 0 0 2em;
    -fx-padding: 0 0 0 0em;
}

.both-padding {
    -fx-border-color: green;
    -fx-label-padding: 0 0 0 2em;
    -fx-padding : 0 0 0 2em;
}

导致这种结果的原因是:

观察

复选框在Java 8中显示异常（因为这个已知缺陷）。

RadioButton 示例显示，-fx-label-padding 可以让用户设置单选按钮和文本之间的填充，而 -fx-padding 则对所有组件进行填充。

-fx-label-padding 和 -fx-padding 都会添加到 Label 上。

我曾经认为它也用于在 Label 的文本和图形之间添加填充，但显然并不是。

- Pagbo

---

谢谢您的解释。有了例子，非常清楚明白。 - cyqsimon

Answer 2

从 Labeled.labelPadding 属性的 javadoc 中：

Labeled 的文本和图形内容周围的填充。[...] 子类可以在此填充之外和 Labeled 的 padding 之内添加节点。

对于 Label，Region.padding 和 Labeled.labelPadding 简单相加。但对于不同的 Labeled 子类，有所不同。例如，RadioButton 和 CheckButton 在图形/文本和标记之间添加此属性。

- fabian