功能1:“加载”(loading)面板
有两种方式实现加载效果:一种是通过stage实现,这种方式的效果不是很理想:1、stage是全局的,在APPLICATION_MODAL模式下,对原界面的所有操作都是无效的;2、在非APPLICATION_MODAL模式下拖动原界面会发现实际是两个窗口。第二种是通过StackPane,在进行耗时操作时添加loading面板,操作结束后移除。好处是可以进行全局和局部的效果,只对局部组件进行操作限制,不影响用户操作其它组件。
<!-- ui目录中的loading.fxml -->
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane id="AnchorPane" prefHeight="300.0" prefWidth="300.0" style="-fx-background-color: rgba(0,0,0,0.7); -fx-opacity: 0.5; -fx-fill: #409eff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<center>
<GridPane alignment="CENTER" prefHeight="120.0" prefWidth="120.0" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints fillWidth="false" hgrow="SOMETIMES" maxWidth="67.0" minWidth="120.0" prefWidth="90.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="70.0" minHeight="10.0" prefHeight="70.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="70.0" minHeight="10.0" prefHeight="70.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ImageView fitHeight="60.0" fitWidth="60.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER">
<image>
<Image url="@img/load.gif" />
</image>
<GridPane.margin>
<Insets bottom="2.0" />
</GridPane.margin>
</ImageView>
<Label alignment="CENTER" prefHeight="25.0" prefWidth="120.0" style="-fx-fill: #409eff;" text="载入中。。。" textAlignment="CENTER" textFill="#009eff" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
<font>
<Font size="20.0" />
</font>
<GridPane.margin>
<Insets top="2.0" />
</GridPane.margin>
</Label>
</children>
</GridPane>
</center>
</BorderPane>
调用面板的代码实现:
public static void loadPane(javafx.scene.layout.StackPane stackPane) {
try { // 添加loading面板到容器组件,自动居中
stackPane.getChildren().add(javafx.fxml.FXMLLoader.load(PopupFrame.class.getResource("ui/loading.fxml")));
} catch (Exception e) {
e.printStackTrace();
}
}
// stackPane.getChildren().remove(1); // 移除loading面板,返回到原界面
功能2:预览图或自定义弹出式面板(窗口)
效果类似于写代码软件下部的弹出式窗口,点击别处时会自动消失。通过JavaFX中 Popup (关于它的使用资料基本没有~想哭)实现。下面是点击“新闻”按钮前点击后,当用户点击Popup外的任何地方会自动消失。
亲们根据自身的需要设计 preview.fxml 就好了。
/** 弹出式窗口
* @param owner 主界面
* @param caller 使触发按钮恢复原状态
* @param y 显示的位置
*/
public static void preview(javafx.stage.Stage owner, javafx.scene.control.ToggleButton caller, double y) {
try {
javafx.stage.Popup popup = new javafx.stage.Popup();
javafx.scene.layout.BorderPane bp = javafx.fxml.FXMLLoader.load(PopupFrame.class.getResource("ui/preview.fxml"));
popup.getContent().add(bp);
// 显示的尺寸
bp.setMinSize(owner.getWidth()-6, 250);
bp.setMaxHeight(250);
// 显示的位置坐标
popup.show(owner, owner.getX()+2, y-212);
popup.setAutoHide(true);
popup.setConsumeAutoHidingEvents(true); // 调用完隐藏事件后,就消耗掉事件,不再往里面的组件传递
popup.setOnHiding((event) -> {
caller.setSelected(false);
});
} catch (IOException e) {
e.printStackTrace();
}
}