JavaFX

Question

我正在尝试让导航面板从左侧滑出。我已经管理了一个动画，但我无法解决一件事，那就是程序 window 左侧区域中留下的绿色空白 space。有谁知道如何去掉左边的绿色 space 吗？谢谢

我的代码如下所示（只需复制粘贴即可）

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

您也可以重复使用时间线，而不是每次都创建一个新时间线:)

Answer 2

我知道这是一个旧线程，但是有一个很棒的 JavaFX 库可以帮助解决这个问题：controlsFX. In particular the HiddenSidesPane 控制对象。

JavaFX - 导航面板

JavaFX - navigation panel

navigation

animation

pane

borderpane