[英]Javafx TabPane with multiple rows of tabs
我想使用(JavaFX)TabPane來顯示20個不同標簽的內容。 這對於標准的TabTane可以正常工作,但是,當窗格中有一定數量的選項卡時,可以單擊按鈕/ ComboBox來單擊未顯示的選項卡之一。
我正在設計將在觸摸屏上使用的功能,因此這不是理想的選擇。 我認為擁有兩排獨立的標簽會更直觀。
如何將兩行選項卡添加到TabPane中,或者可以做些什么來達到類似的效果? 提前致謝。
這是一些示例代碼來重現我的意思:
public class TabTest extends Application {
public static void main(String args[]) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Tabs Test");
Group root = new Group();
Scene scene = new Scene(root, 450, 250, Color.WHITE);
TabPane tabPane = new TabPane();
BorderPane borderPane = new BorderPane();
for( int i = 0; i < 20; i++)
{
Tab tab = new Tab();
tab.setText("Tab " + i);
HBox hbox = new HBox();
hbox.getChildren().add(new Label("Tab " + i));
tab.setContent(hbox);
tabPane.getTabs().add(tab);
}
borderPane.prefHeightProperty().bind(scene.heightProperty());
borderPane.prefWidthProperty().bind(scene.widthProperty());
borderPane.setCenter(tabPane);
root.getChildren().add(borderPane);
primaryStage.setScene(scene);
primaryStage.show();
}
TabPane
的選項卡標題區域基本上是一個StackPane ,因此我認為創建兩行選項卡而不是一列並不是那么容易。
我的想法是隱藏TabPane
的原始選項卡,並將一組ToggleButton
對象放入ToggleGroup
然后將選項卡的選擇綁定到切換選項。
這樣,您可以將“制表符”添加到所需的任何容器(流,網格等)中。
真正最少的樣本:
Main.java
public class Main extends Application {
TabPane tabPane;
private ToggleGroup toggleGroup;
@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 700, 400, Color.WHITE);
primaryStage.setTitle("Tabs Test");
toggleGroup = new ToggleGroup();
toggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
@Override
public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
if (newValue == null)
toggleGroup.selectToggle(oldValue);
else
tabPane.getSelectionModel().select((Tab) newValue.getUserData());
}
});
tabPane = new TabPane();
tabPane.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
VBox vboxToggleOuterContainer = new VBox();
HBox hboxToggleFirstRow = new HBox();
HBox hboxToggleSecondRow = new HBox();
vboxToggleOuterContainer.getChildren().addAll(hboxToggleFirstRow, hboxToggleSecondRow);
for (int i = 0; i < 20; i++) {
Tab tab = new Tab();
tab.setText("Tab " + i);
HBox hbox = new HBox();
hbox.getChildren().add(new Label("Tab " + i));
tab.setContent(hbox);
tabPane.getTabs().add(tab);
ToggleButton tb = new ToggleButton("Tab" + i);
tb.setToggleGroup(toggleGroup);
tb.setUserData(tab);
if (i < 10)
hboxToggleFirstRow.getChildren().add(tb);
else
hboxToggleSecondRow.getChildren().add(tb);
}
toggleGroup.selectToggle(toggleGroup.getToggles().get(0));
VBox vbox = new VBox();
vbox.getChildren().addAll(vboxToggleOuterContainer, tabPane);
vbox.fillWidthProperty().set(true);
root.getChildren().add(vbox);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
application.css
.tab-pane {
-fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin";
-fx-tab-min-height: 0;
-fx-tab-max-height: 0;
}
.tab-pane .tab-header-area {
-fx-padding: 0 0 0 0;
}
.tab-pane .tab-header-area .headers-region .tab {
-fx-padding: 0 0 1 0;
}
該示例實際上是最小的,僅顯示了方法,您可以改進CSS以使控件更加精美(或者,如果我願意的話,也可以對其進行更新)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.