一种方法，用于将JavaFX复选框标签文本与文本放在一行上 [英] A method to algn JavaFX checkbox label text with the text on a line

问题描述

我在一个FXML文件中有一个简单的复选框，与HBox中的其他控件和标签在同一行上。复选框标签文本基础约为6px单位低于所有其他文本和标签在同一行（HBox）。

我可以手动排队在SceneBuilder中通过指定 padding-bottom 值： 6 。我想把它放入CSS，所以所有的复选框标签将排队，但我尝试的任何东西被忽略，并不显示在CSS分析器（太）。

我查看了Checbox默认样式，如下所示：

• 为样式复选框以及：


• UI控制中的复选框

I与ListBox有类似的问题，其中控件是从许多组件构造的。你必须知道哪个事物是相关的。但是，通过浏览：com / sun / javafx / scene / control / skin /

• caspian / caspian.css

我不能选择使文本标签低于同一行/行上的其他文本的组件。此外，在SceneBuilder设计器布局中指定填充将会以逐个（手动）的方式解决问题，它似乎很奇怪，它不适用于：

  .check-box {
 padding-bottom：6px; / *或只有6 * / 
} 
  

向上。

 < HBox alignment =CENTER_LEFT> 
< children> 
< CheckBox fx：id =acknowledgedalignment =TOP_LEFTstyleClass =normaltext =00> 
< padding> 
< Insets bottom =6.0left =4.0right =8.0/> 
< / padding> 
< / CheckBox> 
< Button fx：id =detailButtontext =％alarm.detail.label/> 
< Label fx：id =alarmTypestyleClass =normaltext =％alarm.type.value> 
< padding> 
< Insets left =8.0right =8.0/> 
< / padding> 
< / Label> 
< / children> 
< / HBox> 
 

目的是通过CSS定义padding-bottom，而不是在FXML中手动定义：

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

有任何想法吗？

，该行的可视化结果是复选框本身具有比其他元素（按钮，标签）更小/更低的基线。复选框标签也随后在其他元素下面。如果我们可以使用CSS填充，那么我们不需要手动维护布局。

解决方案

问题应该通过布局（与调整垫等）解决。所以首先停止一个解决方案可以是父窗格的文档，这里是HBox：

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

这可能与你所看到的一致100％确定，虽然，因为你忘了包括一个runnable示例;-)如果所有其他组件在行上是意外地相同的高度或填充框与复选框较小，它将位于窗格的顶部。

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

  private Parent getContent（）{
 HBox box = new HBox（new TextField（something），
 new CheckBox（soso），new Button ））; 
 box.setAlignment（Pos.BASELINE_CENTER）; 
 return box; 
} 
  

I have a plain CheckBox in an FXML file on the same line as some other controls and labels in a HBox.

The checkBox label text-base is about 6px units lower than ALL the other text and labels on the same line (HBox).

I can manually line things up in SceneBuilder by specifying a padding-bottom value of: 6. I wanted to put that into the CSS so all checkbox labels would be "lined-up", but everthing I've tried is ignored and doesn't show in the CSS Analyzer (too).

I looked through the Checbox default styling as pointed out here:

• Styling a checkbox and also:
• Checkbox in the UI controls

I had similar issues with ListBox where the control is constructed from a number of components. You have to know which 'thing' is relevant. However, looking through: com/sun/javafx/scene/control/skin/

• caspian/caspian.css

I can't pick the component that makes the text label lower than other text on the same line/row. Add to that, the fact that specifying the padding in the SceneBuilder designer layout, will fix the issue on a one-by-one (manual) basis, it just seems strange that it won't work for:

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

Does not work on the following FXML mark-up.

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

The objective is to define the padding-bottom via CSS rather than have to do it manually in the FXML:

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

Any ideas?

To be clear, the visual result for this row is that the checkbox itself has a base-line smaller/lower than the other elements (button, label). The CheckBox label is also subsequently "below" the other elements. If we can pad using CSS, then we don't need to manually maintain the layouts.

解决方案

As a general rule, alignment problems should be solved by the layout (vs. tweaking paddings or such). So first stop to a solution could be the doc of the parent pane, here HBox:

The alignment of the content is controlled by the alignment property, which defaults to Pos.TOP_LEFT.

That might be consistent with what you are be seeing (can't be 100% certain, though, as you forgot to include a runnable example ;-) If all other components on the line are accidentally being same height or filling the box with the checkbox smaller, it will positioned at the top of the pane.

Assumed solution is to change the pane's alignment to BASELINE_XX, quick check in code works fine for me:

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

这篇关于一种方法，用于将JavaFX复选框标签文本与文本放在一行上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！