JavaFX 场景生成器按钮栏间距答案

【问题标题】：JavaFX Scene Builder Button Bar SpacingJavaFX 场景生成器按钮栏间距
【发布时间】：2017-12-16 01:07:47
【问题描述】：

我正在尝试处理一个 JavaFX 项目，并且我正在使用 Gluon SceneBuilder 来帮助我构建我的场景，所以它不会花费这么长时间。我正在删除默认窗口边框并尝试包含我自己的功能按钮（关闭窗口、最小化、最大化），并且我正在使用窗口顶部的 ButtonBar 来添加这些按钮，但由于某种原因，按钮不是不要像我希望的那样处理它们的间距。

我计划将它们全部直接相邻放置，中间没有空间，但我无法让它正常工作。我已经查看了按钮以及按钮栏的所有不同设置和选项，并且没有任何地方说它们中的任何一个都有边距或填充，但它们仍然被隔开，你可以看到here。我怎样才能使它们之间没有间距？

【问题讨论】：

请给我们看代码。
为什么不使用Toolbar，而是在css中使用-fx-spacing属性自定义？

标签： javafx javafx-8

【解决方案1】：

您可以使用 HBox 代替 ButtonBar。像这样的：

 <HBox prefHeight="30.0" prefWidth="600.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
     <children>
        <Pane HBox.hgrow="ALWAYS" />
        <Button text="Button" />
        <Button text="Button" />
        <Button text="Button" />
     </children>
  </HBox>

【讨论】：

但 ButtonBar 本质上是一个 HBox，具有用于操作系统特定按钮放置的附加功能。
你不需要的是“特定的按钮位置”。只需尝试以这种方式实现您的按钮（标签、图像）。窗格（在此示例中）只是某些元素之间的“间隔”。在这种情况下，它只会导致您的按钮始终显示在右上角

【解决方案2】：

ButtonBar 预设了一定的布局，应该不是很自定义。尝试将一个或多个 ToolBar(s) 与其他布局窗格（如 GridPane、FlowPane 或 HBox）结合使用。例如，这个总是在右上角创建 3 个按钮：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<BorderPane prefHeight="300.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <top>
      <GridPane>
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints halignment="RIGHT" hgrow="NEVER" minWidth="10.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <ToolBar prefHeight="30.0" GridPane.halignment="RIGHT" GridPane.valignment="TOP" />
            <ToolBar prefHeight="30.0" style="-fx-padding: 0;" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.valignment="TOP">
               <items>
                  <HBox>
                     <children>
                        <Button mnemonicParsing="false" style="-fx-margin: 0;" text="Button" />
                        <Button mnemonicParsing="false" text="Button" />
                        <Button mnemonicParsing="false" style="margin: 0;" text="Button" />
                     </children>
                  </HBox>
               </items>
            </ToolBar>
         </children>
      </GridPane>
   </top>
</BorderPane>

【讨论】：

【解决方案3】：

如果您有理由保存您的 Button Bar 并且您不想直接使用其他布局（工具栏或 HBox），您可以将 Hbox 添加到您的 Button Bar 并将您的按钮添加到您的 hbox 中，如下所示：

<ButtonBar buttonOrder="L_HE+U+FBIX_NCYOA_T" layoutX="130.0" layoutY="24.0" prefHeight="0.0" stylesheets="@fx.css" ButtonBar.buttonData="APPLY">
    <buttons>
        <HBox>
           <children>
              <Button mnemonicParsing="false" text="Button" HBox.hgrow="ALWAYS" />
            <Button mnemonicParsing="false" text="Button" HBox.hgrow="ALWAYS" />
              <Button mnemonicParsing="false" text="Button" />
              <Button mnemonicParsing="false" text="Button" />
              <Button mnemonicParsing="false" text="Button" />
           </children>
        </HBox>
    </buttons>
  </ButtonBar>

结果是

【讨论】：