java - 修改 JavaFX Accordion

Question

我有一个里面有两个 TitlePane 的 Accordion ，我有一个设计问题。我想看看是否有任何方法可以删除您可以在此处看到的标题周围的边框:



这是我拥有的 CSS 代码:

.accordion .titled-pane .title {
    -fx-background-color: transparent;
    -fx-padding: 0.3333em 0.75em 0.3333em -0.5em;
}

}
.accordion .titled-pane>*.content {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.75em 0em 2em;
}

.accordion .titled-pane>.title>.arrow-button>.arrow {
    -fx-background-color: transparent;
}

Answer 1

这里是modena.css ，至少在 JavaFX 13 中，添加了您看到的边框:

.accordion > .titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-15%) 95%,
        derive(-fx-color,-25%) 100%
        ),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
    -fx-background-radius: 0, 0, 0;
}

这个“边框”是使用三种背景颜色实现的，每一种都比前一种稍微多一点。要删除边框，您只需使用:

.accordion > .titled-pane > .title {
    -fx-background-color: null;
}

这是使用上述 CSS 的示例(假设位于名为 Main.css 的文件中):

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

public class Main extends Application {

  @Override
  public void start(Stage primaryStage) {
    Accordion accordion = new Accordion(
        new TitledPane("TitledPane #1", new StackPane(new Label("Content #1"))),
        new TitledPane("TitledPane #2", new StackPane(new Label("Content #2")))
    );

    Scene scene = new Scene(accordion, 400, 200);
    scene.getStylesheets().add(getClass().getResource("/Main.css").toString());

    primaryStage.setScene(scene);
    primaryStage.setTitle("JavaFX " + System.getProperty("javafx.version"));
    primaryStage.show();
  }
}

这是在 Java 8u232(祖鲁社区)上运行的结果的屏幕截图:

(折叠):



(扩展):



您会在带有扩展 TitledPane 的屏幕截图中注意到内容周围有一个边框。这是由 modena.css 添加的以及。如果需要，也可以使用以下 CSS 删除:

.titled-pane > *.content {
  -fx-background-color: null;
  -fx-border-color: null;
}