如何处理单击按钮时生成图像的事件

Question

我正在创建一个允许两个用户玩井字游戏的界面。游戏规则不需要强制执行，当用户点击按钮时，需要出现“X”或“O”。

我已经设置了界面，但是我无法将需要发生的事件连接到按钮。

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;

public class TicTacToe extends Application {
    private GridPane gBox;
    private HBox hbox;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        //int n = 18;

        //ArrayList<Button> buttons = new ArrayList<>(n);

        Image image = new Image("file:O.png");
        Image image2 = new Image("file:X.png");
    
        ImageView imageView1 = new ImageView(image2);  

        Button button1 = new Button("X");
        Button button2 = new Button("O");
        Button button3 = new Button("X");
        Button button4 = new Button("O");
        Button button5 = new Button("X");
        Button button6 = new Button("O");
        Button button7 = new Button("X");
        Button button8 = new Button("O");
        Button button9 = new Button("X");
        Button button10 = new Button("O");
        Button button11 = new Button("X");
        Button button12 = new Button("O");
        Button button13 = new Button("X");
        Button button14 = new Button("O");
        Button button15 = new Button("X");
        Button button16 = new Button("O");
        Button button17 = new Button("X");
        Button button18 = new Button("O");

        gBox = new GridPane();

        gBox.add(button1, 0,0);
        gBox.add(button2,0,1);
        gBox.add(button3,1,0);
        gBox.add(button4, 1,1);
        gBox.add(button5, 2,0);
        gBox.add(button6,2,1);

        gBox.add(button7, 0, 5);
        gBox.add(button8,0,6);
        gBox.add(button9, 1,5);
        gBox.add(button10,1,6);
        gBox.add(button11, 2,5);
        gBox.add(button12,2,6);

        gBox.add(button13,0,10);
        gBox.add(button14,0,11);
        gBox.add(button15,1,10);
        gBox.add(button16,1,11);
        gBox.add(button17,2,10);
        gBox.add(button18,2,11);

        gBox.setHgap(130);
        gBox.setVgap(10);
        gBox.setPadding(new Insets(10));

        ButtonClickHandler mbh = new ButtonClickHandler();

        button1.setOnAction(mbh);

        Scene scene = new Scene(gBox, 380, 300);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Tic Tac Toe");
        primaryStage.show();

    }
    class ButtonClickHandler implements EventHandler<ActionEvent>{
        @Override
        public void handle(ActionEvent event){
            Image image = new Image("file:O.png");
            ImageView imageView = new ImageView(image);
            HBox hbox = new HBox(imageView);
 
            Button btn = (Button) event.getSource();
            imageView.setImage(image);      
        }
    }    
}

Answer 1

以下mre 重现了您所做的事情，避免重复代码，同时为每个按钮添加事件处理程序：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TicTacToe extends Application {

    private static String[] BUTTONS_TEXT = {"X", "O"};
    private static int ROWS = 6, COLS = 3;

    @Override
    public void start(Stage primaryStage) throws Exception {

        GridPane gBox = new GridPane();
        ButtonClickHandler mbh = new ButtonClickHandler();

        for (int col = 0; col < COLS ; col++){
            for (int row = 0; row < ROWS ; row++){
                Button button = new Button(BUTTONS_TEXT[0]);
                button.setOnAction(mbh);
                gBox.add(button, col, row);
            }
        }

        gBox.setHgap(10);  gBox.setVgap(10);
        gBox.setPadding(new Insets(10));

        Scene scene = new Scene(gBox);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Tic Tac Toe");
        primaryStage.show();
    }

    class ButtonClickHandler implements EventHandler<ActionEvent>{
        @Override
        public void handle(ActionEvent event){
            Button btn = (Button) event.getSource();
            btn.setText(btn.getText().equals(BUTTONS_TEXT[0]) ? BUTTONS_TEXT[1] : BUTTONS_TEXT[0]);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

当您的基本功能正常工作时，您可以进行下一步并使用按钮图标而不是文本：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TicTacToe extends Application {

    private static int ROWS = 6, COLS = 3;
    private static String[] BUTTONS_TEXT = {"X", "O"};

    //always use publicly available resources when posting mre
    private static final String[] imageLink = {
            "http://iconsetc.com/icons-watermarks/simple-black/alphanum/alphanum_lowercase-letter-x/alphanum_lowercase-letter-x_simple-black_64x64.png",
            "http://iconsetc.com/icons-watermarks/simple-black/alphanum/alphanum_lowercase-letter-o/alphanum_lowercase-letter-o_simple-black_64x64.png",
    };

    //construct images once
    private static Image[] images=  {new Image(imageLink[0]), new Image(imageLink[1])};

    @Override
    public void start(Stage primaryStage) throws Exception {

        GridPane gBox = new GridPane();

        for (int col = 0; col < COLS ; col++){
            for (int row = 0; row < ROWS ; row++){
                Button button = new Button();
                button.setOnAction(new ButtonClickHandler(BUTTONS_TEXT[0]));
                button.setGraphic(new ImageView(images[0]));
                gBox.add(button, col, row);
            }
        }

        gBox.setHgap(10);  gBox.setVgap(10);
        gBox.setPadding(new Insets(10));

        Scene scene = new Scene(gBox);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Tic Tac Toe");
        primaryStage.show();
    }

    class ButtonClickHandler implements EventHandler<ActionEvent>{

        private String buttonState; //keeps the current state of the button

        ButtonClickHandler(String buttonState){
            this.buttonState = buttonState;
        }

        @Override
        public void handle(ActionEvent event){

            Button btn = (Button) event.getSource();
            if(buttonState.equals(BUTTONS_TEXT[0])){
                btn.setGraphic(new ImageView(imageLink[1]));
                buttonState = BUTTONS_TEXT[1];
            }else{
                btn.setGraphic(new ImageView(imageLink[0]));
                buttonState = BUTTONS_TEXT[0];
            }
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

---