Может ли мой текст отображать больше текста внизу при нажатии?

Question

В моем приложении я создаю страницу справки и хочу создать текст, который при щелчке по тексту отображает больше текста описания внизу, а при повторном нажатии на заголовок / вопрос скрывает текст.Это часто встречается на многих страницах FAQ, но я изо всех сил пытаюсь найти способ сделать это на JavaFX.

Answer 1

Вы всегда можете реализовать это самостоятельно, расширив поведение класса Text, но javafx имеет Accordion , который в сочетании с TitledPane предоставляет требуемую функциональность.

Пример кода его использования:

@Override
public void start(Stage primaryStage) {
    TitledPane tp1 = new TitledPane("Text 1", new Text("Your text goes here....."));
    TitledPane tp2 = new TitledPane("Text 2", new Text("Another text goes here....."));
    TitledPane tp3 = new TitledPane("Text 3", new Text("And yet another text goes here....."));

    Accordion accordion = new Accordion();
    accordion.getPanes().addAll(tp1, tp2, tp3);

    Scene scene = new Scene(accordion, 300, 250);  
    primaryStage.setTitle("AccordionExample");
    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 2

Вы можете использовать TitledPane s:

Map<String, String> questions = new HashMap();
questions.put("Question 1", "Lorem ipsum dolor sit amet, consectetur"
        + "adipiscing elit, sed do eiusmod tempor incididunt ut labore"
        + "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud"
        + " exercitation ullamco laboris nisi ut aliquip ex ea commodo"
        + " consequat. Duis aute irure dolor in reprehenderit in voluptate"
        + " velit esse cillum dolore eu fugiat nulla pariatur. Excepteur"
        + " sint occaecat cupidatat non proident, sunt in culpa qui"
        + " officia deserunt mollit anim id est laborum.");
questions.put("Question 2", "Not answered yet");

VBox content = new VBox();
questions.forEach((key, value) -> {
    Label label = new Label(value);
    TitledPane tp = new TitledPane(key, label);
    tp.setExpanded(false);
    label.setWrapText(true);
    content.getChildren().add(tp);
});

Возможно, вы захотите изменить стиль заголовка с помощью таблицы стилей CSS, добавив в сцену следующую таблицу стилей:

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