我有一個在SceneBuilder中構建的FXML類,它是通過FXMLLoader與其關聯的控制器加載的。我已經在小部件的父面板上放置了一個帶有僞類的樣式類。 ToggleButton的樣式很好,但兩個標籤都沒有。CSS未級聯到標籤(JavaFX)
作爲一個測試,我試着直接給CSS類之一的標籤。行爲很有趣;它會在初始更改時採用,但在僞類更改時沒有更新文本顏色。
以下是從生產代碼中刪除的SCCEE。所有文件都直接在類路徑上。
CustomButton.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="70.0" prefWidth="70.0" styleClass="custom-button" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="CustomButtonController">
<children>
<ToggleButton fx:id="selectionToggle" mnemonicParsing="false" prefHeight="70.0" prefWidth="70.0" />
<Label fx:id="dateLabel" alignment="TOP_LEFT" contentDisplay="TOP" layoutX="5.0" layoutY="5.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" styleClass="custom-button" text="Date" wrapText="true" />
<Label fx:id="eventLabel" alignment="BOTTOM_LEFT" contentDisplay="BOTTOM" layoutX="5.0" layoutY="40.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" text="Event" wrapText="true" />
</children>
</Pane>
CustomButtonController.java:
/**
* Sample Skeleton for 'CustomButton.fxml' Controller Class
*/
import java.net.URL;
import java.util.ResourceBundle;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.Parent;
import javafx.scene.control.Label;
import javafx.scene.control.ToggleButton;
public class CustomButtonController {
@FXML // ResourceBundle that was given to the FXMLLoader
private ResourceBundle resources;
@FXML // URL location of the FXML file that was given to the FXMLLoader
private URL location;
@FXML // fx:id="dateLabel"
private Label dateLabel; // Value injected by FXMLLoader
@FXML // fx:id="selectionToggle"
private ToggleButton selectionToggle; // Value injected by FXMLLoader
@FXML // fx:id="eventLabel"
private Label eventLabel; // Value injected by FXMLLoader
private Parent m_parent;
@FXML // This method is called by the FXMLLoader when initialization is complete
void initialize() {
assert dateLabel != null : "fx:id=\"dateLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
assert selectionToggle != null : "fx:id=\"selectionToggle\" was not injected: check your FXML file 'CustomButton.fxml'.";
assert eventLabel != null : "fx:id=\"eventLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
}
public void setParent(Parent parent) {
m_parent = parent;
selectionToggle.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
m_parent.pseudoClassStateChanged(PseudoClass.getPseudoClass("state2"), selectionToggle.isSelected());
m_parent.applyCss();
}
});
}
}
Main.java:
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class Main implements Runnable {
@Override
public void run() {
JFrame frame = new JFrame("Test Frame");
frame.setSize(800, 600);
JPanel panel = new JPanel();
frame.setContentPane(panel);
FXMLLoader loader = new FXMLLoader(getClass().getResource("/CustomButton.fxml"));
Parent parent = loader.load();
String cssString = getClass().getResource("/CustomButton.css").toExternalForm();
parent.getStylesheets().add(cssString);
CustomButtonController cont = loader.<CustomButtonController>getController();
cont.setParent(parent);
JFXPanel jfxPanel = new JFXPanel();
jfxPanel.setScene(new Scene(parent));
panel.add(jfxPanel);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
new JFXPanel();
Platform.runLater(new Main());
}
});
}
}
CustomButton.css:
.custom-button:state2 {
-fx-base: cyan;
-fx-text-fill: red;
-fx-fill: yellow;
-fx-stroke: purple;
}
.custom-button {
-fx-base: green;
-fx-text-fill: blue;
}
結果(頂部是未選擇的,底部被選擇):
注意,切換按鈕服從-fx基,日期標籤(其直接具有添加到它的CSS類)服從-fx -text-fill的初始顏色,但不會在選擇時更新),並且事件Label不會從CSS中獲取任何內容。
是利用必要的僞類的?一個Node可以有任意多的樣式類,所以爲什麼不在CSS中使用像'.custom-button.state2'這樣的選擇器(句點代替冒號)呢? – VGR
@VGR通常,僞類對於這種功能來說非常方便,因爲您不必擔心檢查您不會多次添加同一類。 –
@James_D我不確定我會關注。無論是使用樣式類還是僞類,在將控件返回到正常狀態時,代碼仍然必須將其刪除。而在最糟糕的情況下,多次添加樣式類別不會有任何後果(除少量內存泄漏外)。我錯過了什麼? – VGR