JavaFX之自定义标题栏(springboot)

自定义标题栏(或者窗口)先看javaFX 默认的效果
在这里插入图片描述
当我们想做全背景的窗口时,javaFX自带的窗口栏,就很格格不入了

一:创建css文件

login.css

.dev-fx-body {
    -fx-background-image: url("../images/login.jpg");
    -fx-background-position: center;
    -fx-background-repeat: no-repeat;/*不平铺*/
    -fx-background-size: cover;/*铺满*/

    -fx-pref-width: 1104;
    -fx-pref-height: 670;
}

二:修改FXML

login.xml
添加 styleClass=“dev-fx-body”

<AnchorPane prefHeight="400.0" prefWidth="600.0"
            xmlns="http://javafx.com/javafx/8"
            xmlns:fx="http://javafx.com/fxml/1"
            styleClass="dev-fx-body"
            fx:controller="com.xiyang.boot.controller.LoginController">
   <children>
      <Button fx:id="button" layoutX="259.0" layoutY="170.0" mnemonicParsing="false" text="Button" />
   </children>
</AnchorPane>

启动项目可以看到窗口栏,让人很不舒服。接下来我们进一步改造
在这里插入图片描述

三:修改Main类

根据springboot-javafx-support我们只需要重写beforeInitialView方法即可,

    @Override
    public void beforeInitialView(Stage stage, ConfigurableApplicationContext ctx) {
        stage.initStyle(StageStyle.TRANSPARENT); /* 透明标题栏 */
        stage.setResizable(false); /* 设置窗口不可改变 */
        stage.setAlwaysOnTop(true); /* 窗口始终悬浮 */
    }

或者在application.properties中配置

javafx.title=自定义标题栏
javafx.stage.style=TRANSPARENT
javafx.stage.resizable=true

效果
在这里插入图片描述
标题栏被隐藏了,但是你会发现窗口无法拖到了,无法手动关闭了
所以还需进一步改进

四:创键窗口栏

创建一个公共的窗口栏模板window.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.*?>
<VBox xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.xiyang.boot.controller.WindowController" fx:id="window" styleClass="dev-fx-window" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
    <children>
        <AnchorPane prefHeight="30">
            <children>
                <Button fx:id="minWindow" mnemonicParsing="false" styleClass="dev-fx-window-min" text="" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="55.0" AnchorPane.topAnchor="0.0" >
                    <tooltip>
                        <Tooltip text="最小化" />
                    </tooltip>
                </Button>
                <Button fx:id="closeWindow" mnemonicParsing="false" styleClass="dev-fx-window-close" text="X" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                    <tooltip>
                        <Tooltip text="关闭" />
                    </tooltip>
                </Button>
            </children>
        </AnchorPane>
    </children>
</VBox>

在login.fxml中引入

<AnchorPane prefHeight="400.0" prefWidth="600.0"
            xmlns="http://javafx.com/javafx/8"
            xmlns:fx="http://javafx.com/fxml/1"
            styleClass="dev-fx-body"
            fx:controller="com.xiyang.boot.controller.LoginController">
   <fx:include source="window.fxml"/>
</AnchorPane>

再创建window.css

.dev-fx-window {
    -fx-background-color: #00000000;
    -fx-pref-width: 100%;
    -fx-pref-height: 30;
}

.dev-fx-window-min {
    -fx-background-color: #00000000;
    -fx-font-size: 18;
    -fx-font-family: "Fira Code";
    -fx-pref-width: 55;
    -fx-border-radius: 0;
    -fx-border-width: 0;
}

.dev-fx-window-min:hover {
    -fx-background-color: #4cc5e8;
    -fx-text-fill: white; /* 字体颜色 */
}

.dev-fx-window-close {
    -fx-background-color: #00000000;
    -fx-font-size: 18;
   -fx-font-family: "Fira Code";
    -fx-pref-width: 55;
    -fx-border-radius: 0;
    -fx-border-width: 0;
}

.dev-fx-window-close:hover {
    -fx-background-color: #e81123;
    -fx-text-fill: white; /* 字体颜色 */
}

在loginView的注解上配置css文件地址

@FXMLView(value = "/fxml/login.fxml",css ={"/css/login.css","/css/window.css"})
public class LoginView extends AbstractFxmlView {
}

最后创建WindowController控制器

@FXMLController /* 标记这个类为javaFX控制器类 */
public class WindowController implements Initializable {

    private Stage primaryStage;

    /* 自定义窗口 */
    public VBox window;
    public Button minWindow;
    public Button closeWindow;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        primaryStage = JavafxSpringboot3Application.getStage(); //primaryStage为start方法头中的Stage
        minWindow.setOnAction(event -> primaryStage.setIconified(true)); /* 最小化 */
        closeWindow.setOnAction((event)->System.exit(0)); /* 关闭程序 */
    }
}

启动效果,当你鼠标悬停时才显示
在这里插入图片描述
但是窗口还是不能拖动,
我们需要给窗口栏增加一个鼠标按下窗口后拖动事件

public class DragWindowHandler implements EventHandler<MouseEvent> {
    private Stage primaryStage; //primaryStage为start方法头中的Stage
    private double oldStageX;
    private double oldStageY;
    private double oldScreenX;
    private double oldScreenY;

    public DragWindowHandler(Stage primaryStage) { //构造器
        this.primaryStage = primaryStage;
    }

    @Override
    public void handle(MouseEvent e) {
        if (e.getEventType() == MouseEvent.MOUSE_PRESSED) {    //鼠标按下的事件
            this.oldStageX = this.primaryStage.getX();
            this.oldStageY = this.primaryStage.getY();
            this.oldScreenX = e.getScreenX();
            this.oldScreenY = e.getScreenY();

        } else if (e.getEventType() == MouseEvent.MOUSE_DRAGGED) {  //鼠标拖动的事件
            this.primaryStage.setX(e.getScreenX() - this.oldScreenX + this.oldStageX);
            this.primaryStage.setY(e.getScreenY() - this.oldScreenY + this.oldStageY);
        }
    }

}

改造WindowController控制器

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        primaryStage = JavafxSpringboot3Application.getStage(); //primaryStage为start方法头中的Stage
        DragWindowHandler handler = new DragWindowHandler(primaryStage);
        window.setOnMousePressed(handler);/* 鼠标按下 */![在这里插入图片描述](https://img-blog.csdnimg.cn/20191210115159766.gif)
        window.setOnMouseDragged(handler);/* 鼠标拖动 */
        minWindow.setOnAction(event -> primaryStage.setIconified(true)); /* 最小化 */
        closeWindow.setOnAction((event)->System.exit(0)); /* 关闭程序 */
    }

效果
在这里插入图片描述

五:demo地址

自定义窗口

  • 8
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值