如何在JavaFX中的Tabpane之间添加拆分？

编程问答 2022-06-08

问题描述

我做了一个垂直的标签，但是在每个标签之间添加一条水平线时遇到了麻烦。

这就是我所拥有的：

.tab *.tab-label {
    -fx-rotate: 90;
}

.tab {
    -fx-padding: 3em 0.5em;
}

.tab-pane .tab-header-area .tab {
    -fx-pref-height: 140;
    -fx-pref-width: 50;
    -fx-background-color: transparent;
}

这是结果的图片。

view

我希望每个标签之间都有一条水平线将它们分开。

解决方法

您可以使用带有Separator的CSS样式，并在标签的宽度和高度上设置最小和最大设置，以实现所需的效果。

image

no-tab-background.css 

.tab-pane .tab-header-area .tab {
    -fx-font-size: 20px;
    -fx-pref-height: 140;
    -fx-pref-width: 50;
    -fx-background-color: transparent;
    -fx-text-box-border: purple;
}

ShowTabs.java 

package com.test.demo;

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class ShowTabs extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        TabPane tabPane = new TabPane();

        tabPane.setSide(Side.LEFT);
        tabPane.setTabMinWidth(20);
        tabPane.setTabMaxWidth(20);
        tabPane.setTabMinHeight(100);
        tabPane.setTabMaxHeight(100);
        tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);
        tabPane.getTabs().addAll(
                makeTab("Open","lemonchiffon"),makeTab("Close","cornflowerblue"),makeTab("Deposit","lightpink"),makeTab("Withdraw","coral"),makeTab("Display","cadetblue")
        );

        tabPane.getStylesheets().add(
                ShowTabs.class.getResource("no-tab-background.css").toExternalForm()
        );

        Scene scene = new Scene(new StackPane(tabPane));
        stage.setScene(scene);
        stage.show();
    }

    private Tab makeTab(String text,String background) {
        Tab tab = new Tab();

        Label label = new Label(text);

        Separator separator = new Separator();
        separator.setPadding(new Insets(0,10,0));

        VBox tabHeaderLayout = new VBox(label,separator);
        tabHeaderLayout.setSpacing(5);
        tabHeaderLayout.setAlignment(Pos.CENTER);
        tabHeaderLayout.setMinWidth(Control.USE_PREF_SIZE);
        tabHeaderLayout.setPrefWidth(120);
        tabHeaderLayout.setMaxWidth(Control.USE_PREF_SIZE);

        Pane content = new Pane();
        content.setPrefSize(300,300);
        content.setStyle("-fx-background-color: " + background + ";");

        tab.setGraphic(tabHeaderLayout);
        tab.setContent(content);

        return tab;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

有关使用超链接和可变内容窗格（例如网页样式菜单系统）的选项卡的替代方法，请参阅：

javajavajavafxjavafxscenebuilder