JavaFX：参考 CSS 中折叠和展开的手风琴状态

Question

希望大家过得好

我正在尝试使用 css 在我的 TiteldPane 对象中根据其 collapsed 或 expanded psuedo-class 属性来控制箭头的旋转.我正在使用 javafx8。如果您查看文档 here，您会看到 expanded 和 collapsed psuedo-classes 在那里。

下面是我认为应该可行的最小示例。一个通用的 main ->

package application;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;


public class Main extends Application 
{
    @Override
    public void start(Stage primaryStage) 
    {
        Accordion accordion = new Accordion
        (
                new TitledPane("TitledPane #1", new Label("Content #1"))
        );
        primaryStage.setScene(new Scene(accordion, 600, 400));
        primaryStage.setTitle("Test");
        primaryStage.show();
    }
}

而下面的 css 如您所料在 main 上工作 ->

.accordion .title > .arrow-button
{
    -fx-rotate: -45;   
}

但是如果我想根据它是否折叠来影响箭头的旋转，我希望能够写出类似下面的内容 ->

.accordion .title:collapsed > .arrow-button
{
      -fx-rotate: 45;
}

.accordion .title:expanded > .arrow-button
{
      -fx-rotate: -45
}

任何人都可以向我解释为什么这不起作用并说明应该如何正确完成吗？在我尝试应用它的项目中，我没有设置旋转动画，但我很想知道这是否会影响事情。

非常感谢您抽出时间来帮助我。

编辑：添加我想要具体实现的细节。我希望箭头在折叠状态下指向下方，我希望它在展开状态下指向上方

Answer 1

在进一步解决这个问题之后，我发现了一个 hack，它允许您在折叠时将箭头指向下方，在展开时将箭头指向上方。但是，当 TitledPane 动画化（或至少看起来很糟糕）时，它将无法正常工作。

import javafx.beans.binding.Bindings;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.Region;
import javafx.scene.transform.Rotate;

public static void pointArrowUp(TitledPane pane) {
    Region arrow = (Region) pane.lookup(".arrow");

    Rotate rotate = new Rotate();
    rotate.pivotXProperty().bind(arrow.widthProperty().divide(2.0));
    rotate.pivotYProperty().bind(arrow.heightProperty().divide(2.0));
    rotate.angleProperty().bind(
            Bindings.when(pane.expandedProperty())
                    .then(-180.0)
                    .otherwise(90.0)
    );

    arrow.getTransforms().add(rotate);
    pane.setAnimated(false);
}

就像一样，上面要求TitledPane在使用前已经显示在Window中；也就是说，除非您使用自定义皮肤。

我尝试简单地调用 arrow.rotateProperty().unbind()，然后在 CSS 中设置旋转，但无论出于何种原因，我无法让它看起来正确。

常规警告：这是一个 "hack" 并且依赖于 TitledPane 的内部实现及其可能在未来版本中更改的外观。更改 JavaFX 版本时要小心。我只在 JavaFX 11.0.2.

上尝试过以上操作

JavaFX：参考 CSS 中折叠和展开的手风琴状态

JavaFX: refer to collapsed and expanded accordion states in CSS

css

java

javafx

accordion

javafx-8