可折叠设置面板

Question

我想像这个例子一样创建设置面板：

我认为这个面板基于SplitPane。但是当按下设置按钮时面板是如何收缩的呢？

Answer 1

假设“设置”按钮导致拆分窗格右侧的窗格显示/消失，您可以通过调用SplitPane.setDividerPositions(...);以编程方式控制该窗格。

简化示例：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.control.TitledPane;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SplitPaneToggleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        ToggleButton settings = new ToggleButton("Settings");

        SplitPane splitPane = new SplitPane();

        TitledPane titledPane = new TitledPane("Options", new Label("An option"));
        VBox settingsPane = new VBox(titledPane);
        settingsPane.setMinWidth(0);
        splitPane.getItems().addAll(new BorderPane(new Label("Main content")), settingsPane);

        DoubleProperty splitPaneDividerPosition = splitPane.getDividers().get(0).positionProperty();

        //update toggle button status if user moves divider:
        splitPaneDividerPosition.addListener((obs, oldPos, newPos) -> 
            settings.setSelected(newPos.doubleValue() < 0.95));

        splitPaneDividerPosition.set(0.8);

        settings.setOnAction(event -> {
            if (settings.isSelected()) {
                splitPane.setDividerPositions(0.8);
            } else {
                splitPane.setDividerPositions(1.0);
            }
        });

        BorderPane root = new BorderPane(splitPane, new HBox(settings), null, null, null);
        Scene scene = new Scene(root, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

您甚至可以为显示/隐藏设置设置动画：

    settings.setOnAction(event  -> {
        KeyValue end ;
        if (settings.isSelected()) {
            end = new KeyValue(splitPaneDividerPosition, 0.8);
        } else {
            end = new KeyValue(splitPaneDividerPosition, 1.0);
        }
        new Timeline(new KeyFrame(Duration.seconds(0.5), end)).play();
    });