JavaFX：尝试使用FXML均匀地分隔工具栏元素

Question

ChatbotView.fxml的FXML布局

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane id="background" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="706.0" stylesheets="@ChatbotStyle.css" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <ToolBar prefHeight="40.0" prefWidth="200.0" styleClass="spacer" BorderPane.alignment="CENTER">
        <items>
            <Button mnemonicParsing="false" text="Calendar">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Topic List">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <TextField>
               <font>
                  <Font size="14.0" />
               </font></TextField>
            <Button mnemonicParsing="false" text="Chatbot's Button">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Quit">
               <font>
                  <Font size="14.0" />
               </font></Button>
        </items>
      </ToolBar>
   </top>
   <bottom>
      <ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
        <items>
          <Button mnemonicParsing="false" text="Map">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Load from File">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Save to File">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Send Tweet">
               <font>
                  <Font size="14.0" />
               </font></Button>
            <Button mnemonicParsing="false" text="Search Twitter">
               <font>
                  <Font size="14.0" />
               </font></Button>
        </items>
      </ToolBar>
   </bottom>
</BorderPane>

我只想弄清楚如何均匀地分隔所有工具栏元素，以便最终看起来像这样：

提前致谢。

Answer 1

只需覆盖工具栏的css样式：

.tool-bar { /* top */
    -fx-alignment: CENTER;
}

或者直接在fxml中设置：

<ToolBar style="-fx-alignment: CENTER" ...>