同时使用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());
    }
});

与下面css中颜色的header-base-color查找ID的定义一起：

头-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());
            }
        });
    }    
}