一种将 JavaFX 复选框标签文本与一行文本对齐的方法

Question

我在 FXML 文件中有一个普通的 CheckBox，与 HBox 中的其他一些控件和标签位于同一行。

checkBox label text-base 比同一行（HBox）上的所有其他文本和标签低大约 6px 单位。

我可以通过指定 padding-bottom 值在 SceneBuilder 中手动排列：6。我想将其放入 CSS 中，以便所有复选框标签都“对齐”，但我尝试过的所有内容都被忽略并且不会显示在 CSS 分析器中（也）。

我查看了此处指出的 Checbox 默认样式：

• Styling a checkbox 还有：
• Checkbox 在 UI 控件中

我在 ListBox 中遇到了类似的问题，其中控件是由多个组件构成的。您必须知道哪个“事物”是相关的。但是，浏览：com/sun/javafx/scene/control/skin/

• 里海/里海.css

我无法选择使文本标签低于同一行/行上的其他文本的组件。除此之外，在 SceneBuilder 设计器布局中指定填充将逐一（手动）解决问题，但它不起作用似乎很奇怪：

.check-box {
    padding-bottom: 6px;  /* or just 6  */
}

不适用于以下 FXML 标记。

  <HBox alignment="CENTER_LEFT" >
     <children>
        <CheckBox fx:id="acknowledged" alignment="TOP_LEFT" styleClass="normal" text="00">
           <padding>
              <Insets bottom="6.0" left="4.0" right="8.0" />
           </padding>
        </CheckBox>
        <Button fx:id="detailButton" text="%alarm.detail.label" />
        <Label fx:id="alarmType" styleClass="normal" text="%alarm.type.value">
           <padding>
              <Insets left="8.0" right="8.0" />
           </padding>
        </Label>
     </children>
  </HBox>

目标是通过 CSS 定义 padding-bottom，而不是必须在 FXML 中手动完成：

    <padding>
         <Insets bottom="6.0" left="4.0" right="8.0" />
   </padding>

有什么想法吗？

明确地说，这一行的视觉结果是复选框本身的基线小于/低于其他元素（按钮、标签）。 CheckBox 标签随后也位于其他元素的“下方”。如果我们可以使用 CSS 填充，那么我们就不需要手动维护布局了。

Answer 1

作为一般规则，对齐问题应该通过布局来解决（相对于调整填充等）。因此，解决方案的第一站可能是父窗格的文档，这里是 HBox：

内容的对齐方式由对齐属性控制， 默认为 Pos.TOP_LEFT。

这可能与您所看到的一致（但不能 100% 确定，因为您忘记包含一个可运行的示例 ;-) 如果生产线上的所有其他组件意外高度相同或填充复选框较小的框，它将位于窗格的顶部。

假设的解决方案是将窗格的对齐方式更改为 BASELINE_XX，快速签入代码对我来说很好：

private Parent getContent() {
    HBox box = new HBox(new TextField("something"), 
            new CheckBox("soso"), new Button("hello"));
    box.setAlignment(Pos.BASELINE_CENTER);
    return box;
}