我在FXML文件中有一个普通的CheckBox,与HBox中的其他一些控件和标签位于同一行。
checkBox标签文本基比同一行(HBox)上的所有其他文本和标签低约6px单位。
我可以通过指定填充底部值来手动排列场景生成器中的内容: 6。我想把它放到CSS中,这样所有的复选框标签都将被“排列”,但是我尝试过的所有东西都被忽略了,也不会显示在CSS分析器中。
我查看了Checbox默认样式,如这里所指出的:
我在ListBox中遇到了类似的问题,其中控件是由许多组件构建的。你必须知道哪个“东西”是相关的。但是,查看:com/sun/javafx/场景/控制/皮肤/
我无法选择使文本标签低于同一行/行上其他文本的组件。此外,在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填充,那么我们就不需要手动维护布局。
作为一般规则,对齐问题应该通过布局来解决(与调整填充或类似的)。因此,解决方案的第一站可以是父窗格的文档,这里是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;
}