使用CSS和setStyle

Question

我有一個對象，我有css風格的對象。在我的程序中，我想更改樣式中的特定元素，例如背景顏色。我碰到的問題是，當我調用setStyle（-fx-background-color：red）時，它將覆蓋所有的樣式元素。即使我只是改變背景顏色。

#header { 
-fx-background-color: #4d4d4d; 
-fx-border-color: #545454; 
-fx-border-width: 1px; 
-fx-border-style: solid; 
} 
#header:hover { 
-fx-background-color: #9ACD32; 
} 

Answer 1

你應該使用「查找顏色」在CSS中定義你的顏色。

查看JavaFX CSS reference瞭解詳情。

查到的顏色

隨着查到的顏色，你可以指的是當前節點或任何其父母上設置的任何其他顏色屬性。這是一個非常強大的功能，因爲它允許在場景中指定顏色的通用調色板，然後在應用程序中使用。如果您想要更改其中一種調色板顏色，您可以在場景樹中的任何級別進行調整，並且會影響該節點及其所有後代。 被查看的顏色在應用之前不會被查找，因此它們是活動的，並且可能會對可能發生的任何樣式更改作出反應，例如在運行時用節點上的「style」屬性替換調色板顏色。

在以下示例中，所有按鈕的所有背景顏色都使用查找的顏色「abc」。

.root { abc: #f00 } 
.button { -fx-background-color: abc } 

示例應用程序

在示例應用中，鍵碼是擡頭顏色值的設定在代碼中動態：

headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { 
    @Override 
    public void changed(
     ObservableValue<? extends Toggle> observableValue, 
     Toggle oldToggle, 
     Toggle newToggle 
    ) { 
     RadioButton radio = (RadioButton) newToggle; 
     header.setStyle("header-base-color: " + radio.getText()); 
    } 
}); 

連同header-base-color的定義查找的ID爲在下面的CSS的顏色：

首標color.css

.root { 
    header-base-color: #4d4d4d; 
} 

#header { 
    -fx-background-color: header-base-color; 
    -fx-border-color: #545454; 
    -fx-border-width: 1px; 
    -fx-border-style: solid; 
} 

#header:hover { 
    -fx-background-color: #9ACD32; 
} 

首標color.fxml

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

<?scenebuilder-stylesheet header-color.css?> 

<?import javafx.geometry.Insets?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.BorderPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.VBox?> 
<?import java.net.URL?> 

<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="HeaderColorController"> 
    <top> 
    <HBox fx:id="header" prefHeight="-1.0" prefWidth="-1.0"> 
     <children> 
     <Label text="A really hard to read label" /> 
     </children> 
    </HBox> 
    </top> 
    <center> 
    <VBox prefHeight="-1.0" prefWidth="-1.0" spacing="10.0" style="-fx-background-color: azure;"> 
     <children> 
     <RadioButton mnemonicParsing="false" style="-fx-text-fill: forestgreen;" text="forestgreen"> 
      <toggleGroup> 
      <ToggleGroup fx:id="headerColorToggleGroup" /> 
      </toggleGroup> 
     </RadioButton> 
     <RadioButton mnemonicParsing="false" style="-fx-text-fill: firebrick;" text="firebrick" toggleGroup="$headerColorToggleGroup" /> 
     <RadioButton mnemonicParsing="false" selected="true" style="-fx-text-fill: #4d4d4d;" text="#4d4d4d" toggleGroup="$headerColorToggleGroup" /> 
     </children> 
     <padding> 
     <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> 
     </padding> 
    </VBox> 
    </center> 
    <stylesheets> 
    <URL value="@header-color.css" /> 
    </stylesheets> 
</BorderPane> 

HeaderColorApp.java

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class HeaderColorApp extends Application { 
    @Override 
    public void start(Stage primaryStage) throws Exception{ 
     Parent root = FXMLLoader.load(getClass().getResource("header-color.fxml")); 
     primaryStage.setScene(new Scene(root)); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
} 

我曾經想過

HeaderColorController.java

import java.net.URL; 
import java.util.ResourceBundle; 

import javafx.beans.value.*; 
import javafx.fxml.FXML; 
import javafx.scene.control.*; 
import javafx.scene.layout.HBox; 

public class HeaderColorController { 

    @FXML 
    private ResourceBundle resources; 

    @FXML 
    private URL location; 

    @FXML 
    private HBox header; 

    @FXML 
    private ToggleGroup headerColorToggleGroup; 

    @FXML 
    void initialize() { 
     assert header != null : "fx:id=\"header\" was not injected: check your FXML file 'header-color.fxml'."; 
     assert headerColorToggleGroup != null : "fx:id=\"headerColorToggleGroup\" was not injected: check your FXML file 'header-color.fxml'."; 

     headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { 
      @Override 
      public void changed(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) { 
       RadioButton radio = (RadioButton) newToggle; 
       header.setStyle("header-base-color: " + radio.getText()); 
      } 
     }); 
    }  
}