提问者:小点点

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


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

checkBox标签文本基比同一行(HBox)上的所有其他文本和标签低约6px单位。

我可以通过指定填充底部值来手动排列场景生成器中的内容: 6。我想把它放到CSS中,这样所有的复选框标签都将被“排列”,但是我尝试过的所有东西都被忽略了,也不会显示在CSS分析器中。

我查看了Checbox默认样式,如这里所指出的:

  • 设置复选框的样式,并且:
  • UI控件中的复选框

我在ListBox中遇到了类似的问题,其中控件是由许多组件构建的。你必须知道哪个“东西”是相关的。但是,查看:com/sun/javafx/场景/控制/皮肤/

  • caspian/caspian. 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定义填充底部,而不是在FXML中手动执行:

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

有什么想法吗?

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


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