javafx - JavaFX - 垂直手风琴
问题描述
嗨,我有一个关于 JavaFX 的问题。我担心答案是剥皮,但我对此一无所知。
我想在 JavaFX 中制作 Accordion/TabPane 交叉。我将尝试用文字解释自己,但在下面我已经包含了我正在尝试制作的图像。
因此,我想制作一个左侧带有按钮的 JavaFX 容器,单击该按钮时,将在此初始容器上移动一个不同的相关容器。再次按下时,顶部容器将移回左侧。我希望按钮和顶部容器从左到右一起移动,然后再返回,就好像它们相互连接一样。
需要明确的是,两个不同的容器最好应该像手风琴那样以平滑的方式在它们之间转换。
解决方案
将滑块的“标准”内容和内容(aHBox
包含按钮和滑块内容)放在 a 中StackPane
,并使用动画以translateX
使滑块移入和移出视图的方式进行设置:
@Override
public void start(Stage primaryStage) {
Button someButton = new Button("Sample content");
StackPane stackPane = new StackPane(someButton);
stackPane.setPrefSize(500, 500);
stackPane.setStyle("-fx-background-color: blue;");
Region sliderContent = new Region();
sliderContent.setPrefWidth(200);
sliderContent.setStyle("-fx-background-color: red; -fx-border-color: orange; -fx-border-width: 5;");
Button expandButton = new Button(">");
HBox slider = new HBox(sliderContent, expandButton);
slider.setAlignment(Pos.CENTER);
slider.setPrefWidth(Region.USE_COMPUTED_SIZE);
slider.setMaxWidth(Region.USE_PREF_SIZE);
// start out of view
slider.setTranslateX(-sliderContent.getPrefWidth());
StackPane.setAlignment(slider, Pos.CENTER_LEFT);
// animation for moving the slider
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(slider.translateXProperty(), -sliderContent.getPrefWidth())),
new KeyFrame(Duration.millis(500), new KeyValue(slider.translateXProperty(), 0d))
);
expandButton.setOnAction(evt -> {
// adjust the direction of play and start playing, if not already done
String text = expandButton.getText();
boolean playing = timeline.getStatus() == Animation.Status.RUNNING;
if (">".equals(text)) {
timeline.setRate(1);
if (!playing) {
timeline.playFromStart();
}
expandButton.setText("<");
} else {
timeline.setRate(-1);
if (!playing) {
timeline.playFrom("end");
}
expandButton.setText(">");
}
});
stackPane.getChildren().add(slider);
final Scene scene = new Scene(stackPane);
primaryStage.setScene(scene);
primaryStage.show();
}
推荐阅读
- html - 彼此下方的引导卡
- java - GridPane add() 未设置列跨度
- javascript - 反应:以编程方式更改选中状态时在复选框输入上触发 onChange?
- python - 是否可以限制 Python 中条件列表理解的长度?
- javascript - Javascript - 根据数组中的特定数据将数组转换为对象
- python - 尝试将 2d 张量乘以 1d 张量,从 2d 张量中的特定列开始
- python - 为什么 collections.Counter 构建频率图所花费的时间少于 for 循环创建的简单 dict?
- arrays - 使用 4D 数组和初始化动态数组进行分段故障
- javascript - 使用 Array.splice 从两个数组中删除字符串
- r - 为日期创建标签