java tabpane_Javafx TabPane具有多行标签

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() {

@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以使控件更加精美(或者,如果我愿意的话,也可以对其进行更新).