JavaFX - 导航面板

Question

我试图让导航面板从左侧滑出。我已经管理了一个动画，但我无法解决一件事，那就是程序窗口左侧区域留下的绿色空白区域。有没有人知道如何摆脱左边的绿色空间？感谢

我的代码看起来像这样（只需复制和粘贴，它应该可以工作）

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application
{
    BorderPane slider;
    BorderPane mainPane;
    Rectangle clip;
    Button show;
    boolean displayed;

    @Override
    public void start(Stage primaryStage) throws Exception {
        show = new Button("Press");
        displayed = false;
        mainPane = new BorderPane();
        mainPane.setPrefSize(500,200);
        slider = new BorderPane(); slider.setPrefHeight(200);
        mainPane.setStyle("-fx-background-color: chartreuse");
        slider.setStyle("-fx-background-color: aqua");

        clip = new Rectangle(0,200);
        slider.setPrefWidth(0);

        slider.setClip(clip);
        slider.setCenter(new Button("Hello"));
        mainPane.setTop(show);
        mainPane.setCenter(new TextArea("some text"));
        mainPane.setLeft(slider);
        show.setOnAction(event -> {
            if (displayed)
            {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), -100);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 0);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 0);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = false;
            }
            else
            {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), 0);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 100);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 100);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = true;
            }
        });

        Scene sc = new Scene(mainPane);
        primaryStage.setScene(sc);
        primaryStage.show();
    }
}

Answer 1

您可以在按下按钮时添加滑块（mainPane的左子节点），而不是手动添加它。然后，再次按下按钮时，可以在转换完成后删除滑块。

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application
{
    BorderPane slider;
    BorderPane mainPane;
    Rectangle clip;
    Button show;
    boolean displayed;

    @Override
    public void start(Stage primaryStage) throws Exception {
        show = new Button("Press");
        displayed = false;
        mainPane = new BorderPane();
        mainPane.setPrefSize(500,200);
        slider = new BorderPane();
        slider.setPrefHeight(200);
        mainPane.setStyle("-fx-background-color: chartreuse");
        slider.setStyle("-fx-background-color: aqua");

        clip = new Rectangle(0,200);
        slider.setPrefWidth(0);

        slider.setClip(clip);
        slider.setCenter(new Button("Hello"));
        mainPane.setTop(show);
        mainPane.setCenter(new TextArea("some text"));
        show.setOnAction(event -> {
            if (displayed) {
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), -100);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 0);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 0);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = false;
                tm.setOnFinished(e -> mainPane.setLeft(null));
            } else {
                mainPane.setLeft(slider);
                Timeline tm = new Timeline();
                KeyValue kv1 = new KeyValue(slider.translateXProperty(), 0);
                KeyValue kv2 = new KeyValue(slider.prefWidthProperty(), 100);
                KeyValue kv3 = new KeyValue(clip.widthProperty(), 100);
                KeyFrame kf = new KeyFrame(Duration.millis(200), kv1, kv2, kv3);
                tm.getKeyFrames().addAll(kf);
                tm.play();
                displayed = true;
            }
        });

        Scene sc = new Scene(mainPane);
        primaryStage.setScene(sc);
        primaryStage.show();
    }
}

你也可以重复使用timline，而不是每次都创建一个新的：）

Answer 2

我知道这是一个旧线程，但是有一个很棒的JavaFX库可以在这里提供帮助：controlsFX。特别是HiddenSidesPane Control对象。