JavaFX - 関数の実装 (随時更新)

特徴1：「読み込み」パネル

ローディング効果を実現するには 2 つの方法があります: 1 つはステージを通じて効果を達成することであり、この方法の効果はあまり理想的ではありません: 1. ステージはグローバルです. APPLICATION_MODAL モードでは、元のインターフェースでのすべての操作はinvalid; 2. 非 APPLICATION_MODAL モードで、元のインターフェイスをドラッグすると、実際には 2 つのウィンドウがあることがわかります。2 つ目は、StackPane を使用して、時間のかかる操作を実行するときに読み込みパネルを追加し、操作が終了したら削除することです。利点は、グローバル効果とローカル効果を実行でき、ユーザーの他のコンポーネントの操作に影響を与えることなく、ローカル コンポーネントの操作のみを制限できることです。

<!-- 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 で実現しています（基本的に使い方の情報はありません〜泣きたいです）。以下は、「ニュース」ボタンをクリックする前とクリックした後です。ユーザーがポップアップ以外の場所をクリックすると、ポップアップは自動的に消えます。

                       ​​​​​​​ ​​​​​​​

 親愛なる友よ、自分のニーズに合わせて 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();
    }
}