0

我有一个内置在 SceneBuilder 中的 FXML 类，它通过 FXMLLoader 加载，并带有一个与之关联的控制器。我在小部件的父面板上放置了一个带有伪类的样式类。ToggleButton 的样式很好，但两个标签不是。

作为测试，我尝试直接将其中一个标签指定为 CSS 类。这种行为很有趣；它在最初的更改中得到了响应，但在伪类更改时没有更新文本颜色。

下面是从生产代码中删除的 SCCEE。所有文件都直接在类路径上。

自定义按钮.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>

自定义按钮控制器.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();
            }
        });
    }
}

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

自定义按钮.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;
}

结果（顶部未选中，底部已选中）：

结果

请注意，ToggleButton 服从 -fx-base，日期标签（直接添加了 CSS 类）服从 -fx-text-fill 的初始颜色，但不会在选择时更新），事件标签不会不要从 CSS 中获取任何东西。

4

2 回答 2

1

您的 FXML 将样式类custom-button应用于窗格（fxml 的根）和dateLabel. 因此，您从 CSS 样式类 persepctive 中的层次结构看起来像

.custom-button
    .toggle-button.button.labeled
    .label.labeled.custom-button
    .label.labeled

从您的侦听器中，选择“切换”按钮时，您将state2伪类设置在根窗格上。So when selected, the hierarchy looks like

.custom-button:state2
    .toggle-button.button.labeled
    .label.labeled.custom-button
    .label.labeled
  • 伪类状态不是通过场景图继承的。所以state2伪类状态不会传播到子节点。
  • 查找颜色的值传播到子节点，因此-fx-base（查找颜色）的值从父节点传播到子节点。
  • 属性通常不被继承。有几个特定的​​例外情况，其中不包括-fx-text-fill.

因此，鉴于您的代码，您描述的行为是预期的。dateLabel获得蓝色文本填充，因为它具有custom-button样式类并-fx-text-fill: blue;直接应用于该样式类。选择按钮时它不会得到-fx-text-fill: red;，因为它没有state2设置伪类（只有根元素具有该伪类）。的值fx-base应用于根节点，并且由于它是一种查找颜色，因此它们通过场景图传播。

你可以尝试类似的东西

.custom-button {
    -fx-base: green ;
}
.custom-button:state2 {
    -fx-base: cyan ;
}
.custom-button .labeled {
    -fx-text-fill: blue ;
}
.custom-button:state2 .labeled {
    -fx-text-fill: red ;
}

以获得您想要的效果。

于 2015-10-03T23:09:48.743 回答
1

最后，我使用“继承”来确保我的标签从自定义父类读取 -fx-text-fill。生成的 CSS 如下：

自定义按钮.css：

.custom-button:state2 { 
  -fx-base: white;
  -fx-text-fill: red;
}

.custom-button { 
  -fx-base: black;
  -fx-text-fill: cyan;
}

.label {
    -fx-text-fill: inherit;
}

也可以通过定义查找颜色来完成。

自定义按钮.css：

.custom-button:state2 { 
  -fx-base: white;
  -labelColor: red;
}

.custom-button { 
  -fx-base: black;
  -labelColor: cyan;
}

.label {
    -fx-text-fill: -labelColor;
}
于 2015-10-05T12:02:38.507 回答