Is it possible to have an accordion with more then 1 open pane in JavaFX?
3 回答
不可以,JavaFX 2.2 Accordion一次只能打开一个窗格。
我为一项功能创建了一个增强请求(JDK-8090554 StackedTitledPanes 控件),该功能允许您一次在手风琴中打开多个窗格,但是该功能请求目前尚未实现。
同时,您可以通过创建多个TitledPane实例并将它们放置在VBox中来非常轻松地自己构建类似的控件。
private VBox createStackedTitledPanes() {
final VBox stackedTitledPanes = new VBox();
stackedTitledPanes.getChildren().setAll(
new TitledPane("Pane 1", contentNode1),
new TitledPane("Pane 2", contentNode2),
new TitledPane("Pane 3", contentNode3)
);
((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
return stackedTitledPanes;
}
VBox
如有必要,您可以将包含窗格的内容包装在ScrollPane中,以便所有展开窗格的内容在其区域溢出可用区域时都可以使用。
我创建了一个示例解决方案(图标是来自:http ://www.fasticon.com 的链接软件)。
更新
为可滚动的 TitledPanes 堆栈对先前外部链接的示例解决方案进行了现代化和内联。
另外,请注意,在现代 JavaFX 环境中,默认样式有点不同(在 TitledPane 内容背景等默认情况下,渐变较少),因此它看起来与此答案中的先前图像略有不同,但其他行为相似.
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class StackedPanes extends Application {
// image license: linkware - backlink to http://www.fasticon.com
private static final Image BLUE_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png");
private static final Image RED_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png");
private static final Image YELLOW_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png");
private static final Image GREEN_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png");
@Override
public void start(Stage stage) {
VBox stackedTitledPanes = createStackedTitledPanes();
ScrollPane scroll = new ScrollPane(stackedTitledPanes);
scroll.setFitToWidth(true);
scroll.setFitToHeight(true);
scroll.setPrefWidth(410);
scroll.setStyle("-fx-base: cadetblue;");
stage.setTitle("Fishy, fishy");
Scene scene = new Scene(scroll);
stage.setScene(scene);
stage.show();
}
private VBox createStackedTitledPanes() {
final VBox stackedTitledPanes = new VBox();
stackedTitledPanes.getChildren().setAll(
createTitledPane("One Fish", GREEN_FISH),
createTitledPane("Two Fish", YELLOW_FISH, GREEN_FISH),
createTitledPane("Red Fish", RED_FISH),
createTitledPane("Blue Fish", BLUE_FISH)
);
((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
return stackedTitledPanes;
}
public TitledPane createTitledPane(String title, Image... images) {
FlowPane content = new FlowPane();
for (Image image : images) {
ImageView imageView = new ImageView(image);
content.getChildren().add(imageView);
FlowPane.setMargin(imageView, new Insets(10));
}
content.setAlignment(Pos.TOP_CENTER);
TitledPane pane = new TitledPane(title, content);
pane.setExpanded(false);
return pane;
}
public static void main(String[] args) {
Application.launch(args);
}
}
将现有答案的最佳部分与简化相结合,您可以通过在 ScrollPane VBox 中创建多个标题面板来复制多打开手风琴,然后将 max-height 属性与侦听器绑定(在 XML 上执行此操作意味着窗格即使折叠也会保留空间)
<ScrollPane fitToHeight="true" fitToWidth="true">
<AnchorPane id="Content">
<VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<!-- Setting maxHeight="Infinity" to all makes them all grow as we want, but then they get spaces between, when collapsed (so we do it in code) -->
<TitledPane fx:id="pane1" animated="false" VBox.vgrow="ALWAYS" expanded="false" text="Pane 1">...</TitledPane>
<TitledPane fx:id="pane2" animated="false" VBox.vgrow="ALWAYS" maxHeight="Infinity" text="Pane 2 (starts expanded)">...</TitledPane>
<TitledPane fx:id="pane3" animated="false" VBox.vgrow="ALWAYS" expanded="false" text="Pane 3">...</TitledPane>
</VBox>
</AnchorPane>
</ScrollPane>
注意:您需要为每个窗格调用此方法:
pane1.expandedProperty().addListener((observable, oldValue, newValue) -> {
//make it fill space when expanded but not reserve space when collapsed
if (newValue) {
pane1.maxHeightProperty().set(Double.POSITIVE_INFINITY);
} else {
pane1.maxHeightProperty().set(Double.NEGATIVE_INFINITY);
}
});
我的要求略有不同
- 手风琴可以扩展或管理嵌入视图的视图空间
- 整个视图可以放入滚动视图
- 如果手风琴是固定大小,则每个框都完全扩展为整个视图的大小,如果不是固定视图,则扩展为内容的大小。
虽然在我的情况下,我无法完成所有 3. 和测试 2.,但我能够提出以下修复:
1) 使用 ScrollPane,里面有一个 VBox,里面有 TitledWindows。2) 确保您的 TitledPanes 设置为VBox.grow="SOMETIMES"。3) 添加一个 VBox 作为最后一个元素并设置VBox.vgrow="ALWAYS" - 这会将 TitledPanes 推到它们的最小尺寸。其他人都提供了代码示例,如果你想使用 fxml,或者不想使用 Java,直接使用元素也可以(使用 SceneBuilder 生成):
<ScrollPane fitToHeight="true" fitToWidth="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<content>
<VBox fx:id="leftVBox" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="100.0">
<children>
<TitledPane fx:id="titledPanelOne" animated="false" expanded="false" style="-fx-background-color: red;" text="Pane One" VBox.vgrow="SOMETIMES">
<content>
<ListView fx:id="listViewOne" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
</content>
</TitledPane>
<TitledPane fx:id="titledPanelTwo" animated="false" expanded="false" style="-fx-background-color: green;" text="Pane Two" VBox.vgrow="SOMETIMES">
<content>
<ListView fx:id="listViewTwo" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
</content>
</TitledPane>
<VBox prefHeight="0.0" prefWidth="0.0" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</content>
</ScrollPane>
4)虽然这确实让您堆叠的盒子彼此独立扩展/收缩,但这并不能解决您的盒子无法正确调整其内容的问题(例如,如果您嵌入了一个列表视图,如上面的示例),因此当屏幕剩余空间很大时,您现在必须滚动相当长的时间。解决方案?需要一点Java。
为了实现这个修复,我们首先将 TitledPane 绑定maxHeightProperty()
到外部 VBox 上heightProperty()
:
public class Controller implements Initializable {
//... controller code
@Override
public void initialize(URL location, ResourceBundle resources) {
//...
variablesViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
historyViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
}
}
我们绑定到每个窗格的expandedProperty()
,并动态绑定和取消绑定prefHeighProperty()
:
private static void bindExpanded(TitledPane pane, ReadOnlyDoubleProperty prop) {
pane.expandedProperty().addListener((observable, oldValue, newValue) -> {
if(newValue) {
pane.prefHeightProperty().bind(prop);
} else {
pane.prefHeightProperty().unbind();
pane.prefHeightProperty().set(0);
}
});
}
如果我们显示,我们要求与 VBox 一样大,如果我们没有显示,我们要求尽可能小。这样做的好处是布局会根据当前显示的 TitledPanes 的数量自动计算可用高度 - 这正是我们想要的行为。
我在这里更详细地介绍: