玩游戏学编程(1)-猜数字-JavaFX-UI

在之前那篇中涉及到很多知识点，其中之一就是JavaFX，JavaFX 是一个开源的下一代客户端应用平台，适用于基于Java构建的桌面、移动端和嵌入式系统。JavaFX类似于Java Swing；学习桌面UI也不是一无是处，WEB前端不也是一样的需要UI，而且WEB前端已经把桌面软件犯过的错误再重犯一遍，然后再把桌面软件的解决方案和设计方案再重新发明一遍, 学习使用JavaFX对后续再学前端或许能更快进入状态。

一、窗口

前面那篇代码中用到这些API： Application， Stage， Pane， VBox， Button

直接运行下面这段代码会出现一个窗口, Stage可翻译成舞台，调用show()方法就是显示这个舞台(窗口)

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

二、控件

Button

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        //按钮控件
        Button button = new Button("ok");
        //布局面板
        Pane pane = new Pane();
        //设置布局面板宽和高
        pane.setPrefSize(900,500);
        //将控件添加到布局面板
        pane.getChildren().add(button);
        //创建一个场景，并将布局面板添加到其中
        Scene scene = new Scene(pane);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

使用垂直布局容器VBox

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
    	//垂直盒子容器
        VBox vBox = new VBox();
        vBox.setPrefSize(900, 500);
        Button button = new Button("ok");
        Button button1 = new Button("cancel");
        Pane pane = new Pane();
        pane.setPrefSize(100,50);
        //将控件添加到VBox
        vBox.getChildren().addAll(pane,button,button1);
        Scene scene = new Scene(vBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

画图: 使用Rectangle类

为按钮添加事件

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        pane.setPrefSize(800, 300);
        Tile tile = new Tile("1");
        pane.getChildren().add(tile);
        //创建按钮并为按钮设置事件监听
        Button button = new Button("点击隐藏矩形框");
        //此处使用了lambda表达式
        button.setOnAction(e->{
            tile.hide();//隐藏tile
        });
        
        Scene scene = new Scene(pane);
        primaryStage.setScene(scene);
        primaryStage.show();


    }

    private static class Tile extends StackPane {
        //定义一个文本
        private Text text;
        Tile(String content) {
            //定义一个矩形
            Rectangle rect = new Rectangle(80,80,null);
            //颜色
            rect.setStroke(Color.AQUAMARINE);
            //宽度
            rect.setStrokeWidth(4);
            //类型
            rect.setStrokeType(StrokeType.INSIDE);
			//创建文本
            text = new Text(content);
            //设置文本字体
            text.setFont(Font.font(64));
            //添加到当前布局面板
            this.getChildren().addAll(rect, text);
            setPickOnBounds(true);
        }
        void hide() {
            text.setVisible(false);
        }
        void show() {
            text.setVisible(true);
        }
    }
}

---

如果想生成多个矩形，而且位置随机，可以使用Random类， 此类用于产生随机数。

private Parent populateGrid() {
    Pane pane = new Pane();
    for (int i = 0; i < 10; i++) {
        TileView tile = new TileView(Integer.toString(i));
        Random random = new Random();
        int randomX = random.nextInt(1024/80);
        int randomY = random.nextInt(500/80);

        tile.setTranslateX(randomX * 80);
        tile.setTranslateY(randomY * 80);

        tile.setOnMouseClicked(e->{

        });
        pane.getChildren().add(tile);
    }
    return pane;
}

使用下面的代码测试populateGrid方法

public class Main extends Application {

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

        //===定义一个垂直盒子容器,populateGrid方法返回的Pane添加进去
        VBox vBox = new VBox();
        vBox.setPrefSize(1000, 500);
    
        //populateGrid函数将会返回一个Pane，Pane存放多个随机的矩形
        vBox.getChildren().add( populateGrid());
        Scene scene = new Scene(vBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

以上代码简单介绍并使用JavaFX，对上一篇中的技术分解