Question

我正在谈论的事件方法是changeBackgroundScreen。该按钮被我的一个css文件中的背景图像覆盖。起初我以为是阻止按钮与之交互的背景。我把背景图片关了，它仍然无法工作。现在我不知道了。

以下是FXML文件的一部分供您关注：

 <HBox alignment="CENTER" spacing="200">
      <children>
          <Button fx:id="optionButton1" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground1"/>
          <Button fx:id="optionButton2" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground2"/>
          <Button fx:id="optionButton3" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground3"/>
      </children>
</HBox>

如果您有兴趣，以下是整个FXML文件：

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import java.net.URL?>

<StackPane  fx:id="Optionmenu" id="BlueBackground1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="millionairetriviagame.OptionscreenController">
    <stylesheets>
        <URL value="@BackgroundImages.css" />
    </stylesheets>
    <stylesheets>
        <URL value="@ButtonLayout.css"/>
    </stylesheets>
    <children>
        <VBox alignment="TOP_CENTER" spacing="20">
            <ImageView>
                <image>
                    <Image url="@ImageFiles/MillionaireLogo1.png"/>
                </image>
            </ImageView>
            <Label text="Click to Change the Background Color" style="-fx-font-style: Italic;"  textFill="white">
                <font>
                    <javafx.scene.text.Font name="sans-serif" size="20" />  
                </font>
            </Label>
            <HBox alignment="CENTER" spacing="200">
                <children>
                    <Button fx:id="optionButton1" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground1"/>
                    <Button fx:id="optionButton2" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground2"/>
                    <Button fx:id="optionButton3" onAction="#changeBackgroundScreen" prefWidth="80" prefHeight="50" id="SmallBlueBackground3"/>
                </children>
            </HBox>
        </VBox>
        <HBox alignment="BOTTOM_RIGHT" spacing="10"  >
            <children>
                <Button fx:id="backToMain"  prefWidth="200" prefHeight="30" onAction="#goToTheMainMenu"  text="Back to the Main Menu" styleClass="ButtonLayout"> 
                    <shape>
                        <javafx.scene.shape.Rectangle  width="200" height="30" arcHeight="30" arcWidth="30" />  
                    </shape>
                </Button>
            </children>
        </HBox>
    </children>
</StackPane>

这是我的控制器类

package millionairetriviagame;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;

public class OptionscreenController implements Initializable, ControllingScreens
{
    private ScreenNavigator controller;
    private MediaPlayer optionMenuPlayer;
    @FXML private Button backToMain;
    private BooleanProperty isDisabled;
    @FXML private StackPane Optionmenu;
    @FXML private Button optionButton1;
    @FXML private Button optionButton2;
    @FXML private Button optionButton3;
    @FXML private StackPane mainMenu;

    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        configureProperties();
        playSong();
    }

    private void configureProperties()
    {
        isDisabled = new SimpleBooleanProperty();
        backToMain.disableProperty().bind(isDisabled);
    }

    @Override
    public void setScreenParent(ScreenNavigator parentScreen)
    {
        controller = parentScreen;
    }

    private void playSong()
    {
        Media optionIntroTheme = new Media(getClass().getResource("/millionairetriviagame/AudioFiles/OptionMenuMusic.mp3").toExternalForm());
        optionMenuPlayer = new MediaPlayer(optionIntroTheme);
        optionMenuPlayer.setAutoPlay(true);
        optionMenuPlayer.setVolume(0.1);
        optionMenuPlayer.setCycleCount(MediaPlayer.INDEFINITE);
    }

    @FXML private void changeBackgroundScreen(ActionEvent event)
    {
        try
        {
            FXMLLoader myLoader = new FXMLLoader(getClass().getResource(MillionaireTriviaGame.MAIN));
            myLoader.load();
            mainMenu = myLoader.getRoot();
        }
        catch (IOException ex)
        {
            Logger.getLogger(OptionscreenController.class.getName()).log(Level.SEVERE, null, ex);
        } 

        if(optionButton2.isPressed())
        {
            mainMenu.setId("BlueBackground2");
            Optionmenu.setId("BlueBackground2");
        }
    }

    @FXML private void goToTheMainMenu(ActionEvent event)
    {
        isDisabled.setValue(true);
        optionMenuPlayer.stop();
        controller.loadScreen(MillionaireTriviaGame.MAINSCREENID, MillionaireTriviaGame.MAIN);
        controller.setScreen(MillionaireTriviaGame.MAINSCREENID);
    }
}

如果你需要查看它，这是我的CSS文件。

#BlueBackground1
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
}

#BlueBackground2
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
}

#SmallBlueBackground1
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
}

#SmallBlueBackground2
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
}

#SmallBlueBackground3
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
}

这是一个视觉

OptionMenu

Answer 1

问题

问题在于您的布局。你有一个StackPane的VBox（包含触发changeBackgroundScreen方法的按钮），最后你有HBox（只有一个按钮，右下方对齐）。< / p> 乍一看，一切看起来都很酷。但是，请记住VBox和HBox是填充其父的布局。因此，即使您无法看到，HBox也会位于VBox的按钮顶部，阻止所有交互。

解决方案

更复杂的解决方案是使用StackPane之外的其他内容，因为我并不真正看到它的需要。但是，既然你已经有了布局，那么就去做一些需要对布局进行微调的东西。

一个非常简单的解决方案是将HBox移到VBox。这样，就没有阻塞层。但是，由于您希望按钮粘贴到场景的右下角，我们将在VBox的子节点之间使用Region并设置VGrow as Always。这将将新添加的HBox推送到场景的底部，无论你的场景大小如何，它都会粘在那里。

完成FXML

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

<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import java.net.URL?>

<StackPane id="BlueBackground1" fx:id="Optionmenu" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.OptionscreenController">
    <stylesheets>
        <URL value="@BackgroundImages.css" />
    </stylesheets>
    <stylesheets>
        <URL value="@ButtonLayout.css" />
    </stylesheets>
    <children>
        <VBox alignment="TOP_CENTER" spacing="20">
            <ImageView>
                <image>
                    <Image url="@ImageFiles/MillionaireLogo1.png" />
                </image>
            </ImageView>
            <Label style="-fx-font-style: Italic;" text="Click to Change the Background Color" textFill="white">
                <font>
                    <javafx.scene.text.Font name="sans-serif" size="20" />  
                </font>
            </Label>
            <HBox alignment="CENTER" spacing="200">
                <children>
                    <Button id="SmallBlueBackground1" fx:id="optionButton1" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
                    <Button id="SmallBlueBackground2" fx:id="optionButton2" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
                    <Button id="SmallBlueBackground3" fx:id="optionButton3" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
                </children>
            </HBox>
         <Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
         <HBox alignment="BOTTOM_RIGHT" spacing="10">
            <children>
                <Button fx:id="backToMain" onAction="#goToTheMainMenu" prefHeight="30" prefWidth="200" styleClass="ButtonLayout" text="Back to the Main Menu"> 
                    <shape>
                        <javafx.scene.shape.Rectangle arcHeight="30" arcWidth="30" height="30" width="200" />  
                    </shape>
                </Button>
            </children>
           </HBox>
        </VBox>
    </children>
</StackPane>

为什么我的控制器类中的事件没有触发

1 个答案:

问题

解决方案

完成FXML