只有我的按钮的左侧部分是可点击的（JavaFX/FXML）

我最近开始使用JavaFX，我的代码中遇到了一个不寻常的问题，我感到很困惑

基本上，按钮在其控制器中正确链接，并可单击，但仅在左侧1/4部分。它几乎表现得好像有什么东西在它前面

我会把代码贴在下面，祈祷有人看到我看不到的东西。我花了两天的时间调试为什么按钮有时才起作用，直到我意识到随机点击按钮的问题所在

请记住，这个FXML已经完成了不同锚烷的实验。使用CTRL+F“fooButton”可以找到问题区域。它是边框窗格的左侧

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

<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane fx:id="mainWindow" prefHeight="461.0" prefWidth="760.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="guiControllers.MainController">
   <top>
      <Pane id="body" prefHeight="96.0" prefWidth="658.0" style="-fx-background-color: #243242; -fx-border-color: #0E141B; -fx-border-radius: 3;" stylesheets="@application.css" BorderPane.alignment="CENTER">
         <children>
            <Label layoutX="103.0" layoutY="25.0" prefHeight="48.0" prefWidth="394.0" text="Title Here" textFill="WHITE">
               <font>
                  <Font name="Calibri Bold" size="41.0" />
               </font>
            </Label>
            <ImageView fitHeight="55.0" fitWidth="61.0" layoutX="25.0" layoutY="20.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../Res/mhlogo.png" />
               </image>
            </ImageView>
         </children>
      </Pane>
   </top>
   <left>
      <AnchorPane BorderPane.alignment="TOP_CENTER">
         <BorderPane.margin>
            <Insets />
         </BorderPane.margin>
         <children>
            <VBox id="buttonBar" fx:id="buttonBar" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="170.0" minWidth="170.0" prefHeight="365.0" prefWidth="170.0" style="-fx-background-color: #2E4055; -fx-border-radius: 3; -fx-border-color: #0E141B;">
               <children>
                  <AnchorPane prefHeight="365.0" prefWidth="309.0">
                     <children>
                        <Pane layoutX="1.0" layoutY="2.0" prefHeight="41.0" prefWidth="167.0">
                           <children>
                              <Pane layoutX="-1.0" layoutY="-2.0" prefHeight="33.0" prefWidth="169.0" style="-fx-background-color: #565656; -fx-border-color: #000000; -fx-border-radius: 20; -fx-background-radius: 20;">
                                 <children>
                                    <ImageView fitHeight="19.0" fitWidth="18.0" layoutX="7.0" layoutY="7.0" pickOnBounds="true" preserveRatio="true">
                                       <image>
                                          <Image url="@../Res/magnifying-glass.png" />
                                       </image>
                                    </ImageView>
                                    <TextField layoutX="29.0" layoutY="2.0" prefHeight="0.0" prefWidth="134.0" style="-fx-border-radius: 1; -fx-border-color: #111111; -fx-border-width: 2; -fx-background-color: #FFFFFF; -fx-background-radius: 20; -fx-border-radius: 20;" styleClass="stop-color-leaking" stylesheets="@../cSS/application.css" />
                                 </children>
                              </Pane>
                           </children>
                        </Pane>
                        <AnchorPane layoutX="3.0" layoutY="43.0">
                           <children>
                              <Button id="fooButton" fx:id="fooButton" alignment="CENTER" contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="167.0" minWidth="167.0" mnemonicParsing="false" onAction="#loadFooPame" prefWidth="167.0" style="-fx-background-color: #CDCDCD; -fx-border-color: #0E141B; -fx-border-radius: 3;" styleClass="mainFont" stylesheets="@../cSS/application.css" text="Find Patient" textAlignment="CENTER" textOverrun="CLIP" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
                              <Button id="barButton" fx:id="barButton" alignment="CENTER" contentDisplay="TOP" layoutY="24.0" maxHeight="1.7976931348623157E308" maxWidth="167.0" minWidth="167.0" mnemonicParsing="false" onAction="#loadBarPane" prefHeight="24.0" prefWidth="167.0" style="-fx-background-color: #CDCDCD; -fx-border-color: #0E141B; -fx-border-radius: 3;" styleClass="mainFont" stylesheets="@../cSS/application.css" text="Add Appointments" textAlignment="CENTER" textOverrun="CLIP" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
                           </children>
                        </AnchorPane>
                        <AnchorPane layoutX="1.0" layoutY="197.0" prefWidth="169.0">
                           <children>
                              <ImageView id="settingsButton" fitHeight="38.0" fitWidth="48.0" layoutX="64.0" layoutY="130.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../Res/settings.png" />
                                 </image>
                              </ImageView>
                           </children>
                        </AnchorPane>
                     </children>
                  </AnchorPane>
               </children>
            </VBox>
         </children>
      </AnchorPane>
   </left>
   <right>
      <TabPane id="tabPane" fx:id="tabPane" focusTraversable="false" prefHeight="365.0" prefWidth="166.0" rotateGraphic="true" style="-fx-background-color: # #414760;" styleClass="tab-header-background" tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
        <tabs>
          <Tab fx:id="notesTab" text="Notes">
            <content>
              <AnchorPane maxWidth="400.0" minHeight="0.0" minWidth="200.0" prefHeight="336.0" prefWidth="216.0" style="-fx-border-color: #414760; -fx-background-radius: 3;" styleClass="tab-header-background" stylesheets="@../application/CSS/application.css" />
            </content>
          </Tab>
          <Tab fx:id="diagramTab" closable="false" text="Diagram" />
        </tabs>
         <cursor>
            <Cursor fx:constant="DEFAULT" />
         </cursor>
         <stylesheets>
            <URL value="@application.css" />
            <URL value="@../application/CSS/application.css" />
         </stylesheets>
      </TabPane>
   </right>
   <center>
      <AnchorPane id="centerAP" fx:id="centerAP" BorderPane.alignment="CENTER">
      </AnchorPane>
   </center>
</BorderPane>

有什么想法吗

编辑2：

编辑2：

问题在于中心面板太大。简单的解决方案，奇怪的问题诊断

尝试从两个按钮中删除背景色和边框色。 当你选择一个按钮时，你可以看到一个蓝色的轮廓 使用：focusCSS伪类更改颜色或在选择按钮时提供效果

---

您正在使用SceneBuilder吗？如果是，当您选择“在窗口中显示预览”时，是否可以单击按钮？如果你可以发布一个场景的屏幕截图，那可能会有所帮助。我不确定按下它们是否有效，因为它们会将一个新的FXML文件加载到中心面板中。我现在将使用屏幕截图进行更新，谢谢。你能从按钮中删除

-fx背景色

样式并再次测试吗？我尝试了这个，但没有成功。我完全不明白这一点，它对我很有效。我正在运行您的FXML，我可以单击按钮。如果您保持背景色，您将看不到它们的悬停或选定状态，但您可以通过任意方式单击它们，您将看到它们的onAction方法被调用。删除你的样式，这样你就可以看到默认的按钮样式了。谢谢你的提示，我就是这么做的。