java - 修改 JavaFX 手风琴

Question

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

这是我拥有的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;
}

标签： javacssjavafxbackgroundaccordion

Answer 1

至少在 JavaFX 13 中，这里modena.css是添加您所看到的边框的地方：

.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;
}