可折叠设置面板

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(); 
    });