JavaFX 按钮栏布局 - 方向和空间分布答案

【问题标题】：JavaFX Buttonbar Layouting - orientation and space distributionJavaFX 按钮栏布局 - 方向和空间分布
【发布时间】：2018-04-11 17:39:36
【问题描述】：

我有这个带有一些按钮和滑块的按钮栏（在 SceneBuilder 中）：

目标

左侧的所有按钮，宽度一致 - 小间距 - 滑块填充剩余宽度

-> Slider 需要使用 fxml 退出ButtonUniformSize，我只找到了编程方式setButtonUniformSize

我也发现了这个问题： JavaFX: Align Buttons inside ButtonBar (using SceneBuilder or fxml) 但它是关于单独配置和对齐按钮，我不想要。

在下面的屏幕截图中，您可以看到方向设置为 LEFT_TO_RIGHT，我只是不明白为什么它是从右到左对齐的？

这是 SceneBuilder 生成的代码的相关部分：

<VBox prefHeight="600.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
  <children>
    <MenuBar VBox.vgrow="NEVER">
      [...]
    </MenuBar>
      <ButtonBar buttonMinWidth="25.0" nodeOrientation="LEFT_TO_RIGHT" VBox.vgrow="NEVER">
        <buttons>
            <Button mnemonicParsing="false" styleClass="stop" />
            <Button mnemonicParsing="false" styleClass="playPause" />
            <Slider styleClass="volume" />
        </buttons>
         <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </padding>
      </ButtonBar>
      <FolderView VBox.vgrow="ALWAYS" />
  </children>
</VBox>

【问题讨论】：

有没有理由不把按钮放在按钮栏里，把按钮栏和滑块放在HBox里？这样就很容易控制滑块的布局。我不明白您对nodeOrientation 的要求是什么。 LEFT_TO_RIGHT 是默认设置，您的控件按预期从左到右排列。
是吗？那为什么左边有空呢？使用按钮栏的原因是我希望所有按钮的宽度相同，并且它默认为我想要的所有值，例如垂直居中等
节点从左到右排列：首先有两个按钮，然后是滑块，按钮在滑块的左侧。默认情况下，左侧有空白区域，因为它向右对齐。这与节点方向无关。我不是建议移除按钮栏。仅将其用于按钮（而不是滑块）。调用setButtonUniformSize 的“FXML 方式”是<Slider ButtonBar.buttonUniformSize="false" />，但我不知道Scene Builder 是否有办法设置该属性。
我看不到任何改变按钮栏对齐方式的方法，无论是在 fxml 还是在 Java 中

标签： java javafx fxml scenebuilder

【解决方案1】：

看起来这是一个缺失的功能。 Jfx Project bug tracker 似乎对此没有任何相关问题。

代替

<ButtonBar>
   <buttons>
      <Button text="Button A"/>
      <Button text="Button B"/>
      <Button text="Button C"/>
   </buttons>
</ButtonBar>

做一个

<HBox>
  <Button text="Button A"/>
  <Button text="Button B"/>
  <Button text="Button C"/>
</HBox>

获得左对齐的按钮。如果您打算稍后使用均匀间隔的图标而不是按钮文本的文本，这将特别有意义。

【讨论】：

【解决方案2】：

我遇到了同样的问题，找到了解决方案。您需要在要排除的字段上添加 ButtonBar.buttonUniformSize="false"。

下面的工作示例，

<ButtonBar BorderPane.alignment="CENTER">
<buttons>
    <TextField fx:id="txtPrivilegeName" minWidth="500" prefWidth="500" promptText="Privilege name" ButtonBar.buttonData="LEFT" ButtonBar.buttonUniformSize="false"/>
    <Button onAction="#handleAddPrivilege" text="Add" ButtonBar.buttonData="RIGHT"/>
    <Button onAction="#handleRemovePrivilege" text="Remove" ButtonBar.buttonData="RIGHT"/>
</buttons>
<BorderPane.margin>
    <Insets left="10.0" right="10.0" top="10.0"/>
</BorderPane.margin>

【讨论】：