java Fx中的布局

最新推荐文章于 2024-06-02 12:37:17 发布

刘璐菲

最新推荐文章于 2024-06-02 12:37:17 发布

阅读量540

点赞数 1

分类专栏： Java学习笔记

本文链接：https://blog.csdn.net/qq_43077318/article/details/109493327

版权

Java学习笔记专栏收录该内容

28 篇文章 3 订阅

订阅专栏

在这里插入图片描述

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package mystackpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

/**
 *
 * @author liulufei
 */
public class MyStackPane extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        //浮动布局，从左到右从上到下
        FlowPane pane = new FlowPane();
        //堆叠式布局，后方的会隐藏先放的
        //StackPane pane = new StackPane();
        //向窗格里添加按钮
        pane.getChildren().add(new Button("click me"));
        pane.getChildren().add(new Button("No click me"));
        //生成一个新的场景
        Scene scene = new Scene(pane, 200, 200);
        //设置标题
        primaryStage.setTitle("pane Example");
        //设置场景
        primaryStage.setScene(scene);
        //显示
        primaryStage.show();        
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

1.StackPane 的用途

StackPane中的节点是一个堆叠在一个上，利用这种特点我们可以把一张图片做背景图，其它结点，例如：按钮，把按钮放在图片上。

package com.mycompany.teststackpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;


/**
 * JavaFX App
 */
public class App extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("测试StackPane");
        StackPane root = new StackPane();
        Scene scene = new Scene(root);
        //放一个背景图片
        Image image = new Image("file:/Users/liulufei/NetBeansProjects/myImage/src/main/java/com/mycompany/myimage/test.gif",
                500D,500D,true,false);
        ImageView imageView = new ImageView(image);
        root.getChildren().add(imageView);
        
        //放一个按钮
        Button btn = new Button("按钮");
        root.getChildren().add(btn);
        
        stage.setScene(scene);
        stage.show();
        
    }

}

效果图
在这里插入图片描述

stackPane的用途2：通过StackPane 创建特殊的图形，使图形之间彼此堆叠组成新的背景图片

package com.mycompany.teststackpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;


/**
 * JavaFX App
 */
public class App extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("测试StackPane");
        StackPane root = new StackPane();
        Scene scene = new Scene(root);
        //放一个背景图片
        Image image = new Image("file:/Users/liulufei/NetBeansProjects/myImage/src/main/java/com/mycompany/myimage/test.gif",
                500D,500D,true,false);
        ImageView imageView = new ImageView(image);
        root.getChildren().add(imageView);
        
//        //放一个按钮
//        Button btn = new Button("按钮");
//        root.getChildren().add(btn);
        
        for(int i = 0; i < 8 ; i++)
        {
            Rectangle rectangle = new Rectangle(50,200);
            rectangle.setStroke(Color.BLACK);
            rectangle.setFill(Color.RED);
            rectangle.setRotate(i*45);
            root.getChildren().add(rectangle);
        }
        stage.setScene(scene);
        stage.show();
        
    }

}

效果图
在这里插入图片描述

2.FlowPane

在这里插入图片描述
如果改变窗口大小最右边的就被挤下去了

在缩小中间的也被挤下去了

2.1FolowPane中常用的属性
alignment - 对齐方式-使布局与宽度或者高度对齐
orientation - 布局水平或者垂直优先
hgap - 节点之间的水平间隙
vgap - 节点之间的垂直间隙

如果使用另一个FlowPane的构造函数

FlowPane flowPane = new FlowPane(Orientation.VERTICAL);

则默认是垂直浮动
在这里插入图片描述

以上两个示例中有很大一部分空白。这是因为，默认情况下，alignment属性设置为Pos.TOP _ LEFT。
Pos还有很多种对齐方式
在这里插入图片描述

使用Pos.BOTTOM_CENTER效果
在这里插入图片描述

还可以通过构造函数设置行宽和间距

//节点之间的水平间隙为10像素，垂直间隙为20像素
FlowPane flowPane = new FlowPane(10,20);

在这里插入图片描述

//既包括对齐点，又包括水平间隙和行距
FlowPane flowPane = new FlowPane(Orientation.VERTICAL, 10,20);

在这里插入图片描述

浮动布局的问题

浮动布局会由于用户调整窗口大小从而导致布局发生错乱。为了解决这个问题，Stage类中有一个resizable属性，它可以禁用用户调整窗口大小。

//禁止用户调整窗口大小，从而防止内容发生错乱
stage.setResizable(false);

3.GridPane布局

网格布局
网格窗格布局管理器为程序员要放置的节点提供了一个位置网格。网格窗格对象没有严格的行和列数，但是知道哪些对象已放置在网格中，因此可以相应地调整布局。将节点添加到“网格窗格”对象后，必须确定它们在网格中的位置。这可以通过默认设置或调用方法设置位置来完成。

package com.mycompany.testgridpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;


/**
 * JavaFX App
 */
public class App extends Application {

    @Override
    public void start(Stage stage) {
        GridPane gridPane = new GridPane();
        Scene scene = new Scene(gridPane);
        Circle circle1 = new Circle(30);
        Circle circle2 = new Circle(30);
        Circle circle3 = new Circle(30);
        Circle circle4 = new Circle(30);
        
        gridPane.add(circle1, 0, 0);
        gridPane.add(circle2, 0, 1);
        gridPane.add(circle3, 0, 2);
        gridPane.add(circle4, 1, 1);
        
        stage.setScene(scene);
        stage.show();
    }
}

效果
在这里插入图片描述

有关此代码的一些重要点：
1.水平和垂直维度上的网格位置都像Java数组一样从位置0开始。
2.我们并未将节点放置在所有可能的位置，有些位置是空的。
3.我们不必在窗格对象上调用get Children（）即可添加节点。从网格窗格对象直接调用add（）方法。

package com.mycompany.testgridpane;

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;


/**
 * JavaFX App
 */
public class App extends Application {

    @Override
    public void start(Stage stage) {
        GridPane gridPane = new GridPane();
        Scene scene = new Scene(gridPane);
        Circle circle1 = new Circle(30);
        Circle circle2 = new Circle(50);
        Circle circle3 = new Circle(30);
        Circle circle4 = new Circle(30);
        
        gridPane.add(circle1, 0, 0);
        gridPane.add(circle2, 0, 1);
        gridPane.add(circle3, 0, 2);
        gridPane.add(circle4, 1, 1);
        
        //设置居中点
        gridPane.setAlignment(Pos.CENTER);
        //设置circle1的在方格中的对齐点
        gridPane.setHalignment(circle1,HPos.RIGHT);
        //设置circle2的在方格中的对齐点
        gridPane.setValignment(circle2,VPos.BOTTOM);
        //设置水平间隙
        gridPane.setHgap(20);
        //设置垂直间隙
        gridPane.setVgap(50);
        stage.setScene(scene);
        stage.show();
    }

    

}

效果图

在这里插入图片描述

BorderPane

刘璐菲

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
java Fx中的布局

/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package mystackpane;import javafx.application.Application;import ja.
复制链接

扫一扫