加載另一個FXML文件後，透明舞臺/場景失去透明度

Question

當我開始我的應用程序時，我的透明javafx.stage.Stage顯示了半透明的圖像，如預期的那樣。但是在第二階段加載之後，第一階段失去了透明度。

奇怪的是，如果第二個fxml文件（「MainScreen.fxml」）不包含像按鈕或文本字段這樣的組件，背景保持透明。

我在macOS Sierra上的eclipse neon.2中使用JavaSE和JavaSE-1.8。

Main類

package customPackage.main; 

import javafx.animation.FadeTransition; 
import javafx.application.Application; 
import javafx.application.Platform; 
import javafx.geometry.Rectangle2D; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.stage.Screen; 
import javafx.stage.Stage; 
import javafx.stage.StageStyle; 
import javafx.util.Duration; 

public class Main extends Application implements Runnable { 

    private Stage primaryStage; 
    private Stage stage; 

    private Controller launchController; 

    @Override 
    public void start(Stage primaryStage) { 
     this.primaryStage = primaryStage; 

     launchController = new Controller("LaunchScreen.fxml"); 
     Scene launchScene = new Scene(launchController); 

     launchScene.setFill(Color.TRANSPARENT); 

     primaryStage.initStyle(StageStyle.TRANSPARENT); 
     primaryStage.setAlwaysOnTop(true); 
     primaryStage.setResizable(false); 
     primaryStage.setScene(launchScene); 
     primaryStage.show(); 

     Thread thread = new Thread(this); 
     thread.start(); 
    } 

    @Override 
    public void run() { 
     try { 
      Thread.sleep(3000); 
      // simulate work 
     } catch (InterruptedException e) { 
      e.printStackTrace(); 
     } 

     Controller controller = new Controller("MainScreen.fxml"); 
     Scene scene = new Scene(controller); 

     Platform.runLater(new Runnable() { 
      @Override 
      public void run() { 
       stage = new Stage(); 
       stage.initStyle(StageStyle.UNDECORATED); 
       stage.setResizable(false); 
       stage.setScene(scene); 
       stage.show(); 
      } 
     }); 
    } 
} 

Controller類

package customPackage.main; 

import java.io.IOException; 

import javafx.fxml.FXML; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.control.ProgressBar; 
import javafx.scene.layout.AnchorPane; 

public class LaunchController extends AnchorPane { 

    @FXML 
    private ProgressBar bar; 

    public LaunchController(String filename) { 
     FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(filename)); 
     fxmlLoader.setRoot(this); 
     fxmlLoader.setController(this); 

     try { 
      fxmlLoader.load(); 
     } catch (IOException e) { 
      e.printStackTrace(); 
     } 
    } 
} 

FXML文件（ 「LaunchScreen.fxml」）

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

<?import javafx.scene.effect.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.image.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 

<fx:root fx:id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="326.0" prefWidth="883.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <ImageView fitHeight="326.0" fitWidth="883.0" layoutX="7.0" layoutY="134.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <image> 
      <Image url="@http://www.lunapic.com/editor/premade/transparent.gif" /> 
     </image> 
     </ImageView> 
    </children> 
    <cursor> 
     <Cursor fx:constant="DEFAULT" /> 
    </cursor> 
</fx:root> 

FXML文件（「MainScree n.fxml「）

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

<?import java.net.*?> 
<?import javafx.geometry.*?> 
<?import javafx.scene.image.*?> 
<?import javafx.scene.control.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.layout.AnchorPane?> 

<fx:root fx:id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <ImageView fitHeight="720.0" fitWidth="1280.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <image> 
      <Image url="@http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg" /> 
     </image> 
     </ImageView> 
     <HBox spacing="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"> 
     <children> 
      <Button fx:id="button1" mnemonicParsing="false" onAction="#button1Press" prefHeight="45.0" prefWidth="1000.0" text="Singleplayer" /> 
      <Button fx:id="button2" mnemonicParsing="false" onAction="#button2Press" prefHeight="45.0" prefWidth="1000.0" text="Multiplayer" /> 
      <Button fx:id="button3" mnemonicParsing="false" onAction="#button3Press" prefHeight="45.0" prefWidth="1000.0" text="Settings" /> 
      <Button fx:id="button4" mnemonicParsing="false" onAction="#button4Press" prefHeight="45.0" prefWidth="1000.0" text="Quit" /> 
     </children> 
     <padding> 
      <Insets bottom="30.0" left="100.0" right="100.0" top="20.0" /> 
     </padding> 
     </HBox> 
     <Region fx:id="region" prefHeight="15.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> 
    </children> 
</fx:root> 

溶液（由James_D解決）

我加入

.root { 
    -fx-background-color: transparent; 
} 

到外部樣式表並加入stylesheets="@application.css"在FXML文件根節點。

Answer 1

JavaFX的默認CSS樣式表modena將非透明顏色應用於根節點的背景。這是您顯示主視圖時看到的顏色。

你沒有看到這個在你的第一個屏幕，或者如果從主屏幕上刪除按鈕，是默認的樣式表只有第一次加載的Control類（或子類之一）的原因被實例化。這樣做是爲了避免不需要CSS應用程序的開銷。

要修復，無論是在FXML文件添加style="-fx-background-color: transparent;"到根節點，或添加規則

.root { 
    -fx-background-color: transparent ; 
} 

到外部樣式表。