Javafx TabPane具有多行选项卡

Kornephoros 发表于 Dev

科尼弗洛斯（Kornephoros）

我想使用（JavaFX）TabPane来显示20个不同选项卡的内容。这对于标准的TabPane可以正常工作，但是，当窗格中有一定数量的选项卡时，可以单击按钮/ 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();
}

链接到选项卡式视图，因为我还不能发布图像

DVarga

选项卡标题区域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以使控件更加精美（或者，如果我愿意的话，也可以对其进行更新）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。