如何在 Javafx 中展开标签栏

Posted 2023-03-30

【中文标题】如何在 Javafx 中展开标签栏

【英文标题】：How to expand tab bar in Javafx

【发布时间】：2020-06-24 17:54:42

【问题描述】：

我正在尝试使用 Javafx 中的 TabPane 实现登录和注册菜单。标签栏的默认外观就像第一张图片。我想知道如何使标签栏看起来像第二张图片（我为第二张截图 xD 操作图像）。我的问题类似于this question，但在 Java 中。我很感激任何评论。谢谢。

【问题讨论】：

如果不实现自定义皮肤（这可能很重要），我不确定这是否可行。您可以提交功能请求。

@Slaw 听到这个消息我很难过。我为此发送了一个功能请求。感谢您的评论。

我为此提交了一个功能请求：bugs.java.com/bugdatabase/view_bug.do?bug_id=JDK-8248380

【参考方案1】：

使用 TabPane 并不容易。但是您可以使用自定义 CSS 轻松创建控件。

package control;

import javafx.event.ActionEvent;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.BorderPane;

public class ButtonBarPane extends BorderPane 

    private static final String DEFAULT_STYLE_CLASS = "button-bar-pane";
    private ToolBar buttonBar;
    private Node currentPagePane;

    public ButtonBarPane() 
        buildView();
    

    private void buildView() 
        getStyleClass().setAll(DEFAULT_STYLE_CLASS);
        buttonBar = new ToolBar();
        setTop(buttonBar);
    

    public void addPage(String title, Node pagePane) 
        Button btn = new Button(title);
        btn.setContentDisplay(ContentDisplay.TOP);
        btn.setOnAction((ActionEvent event) -> 
            setSelectedButton(btn);
            showPage(pagePane);
        );
        buttonBar.getItems().add(btn);
        btn.setPrefWidth(300);

        if (buttonBar.getItems().size() == 1) 
            setSelectedButton(btn);
            showPage(pagePane);
        
    

    private void setSelectedButton(Button btnSelected) 
        buttonBar.getItems().forEach((node) -> 
            node.getStyleClass().removeAll("selected");
        );
        btnSelected.getStyleClass().add("selected");
    

    private void showPage(Node pagePane) 
        if (currentPagePane != null) 
            setCenter(null);
        
        this.currentPagePane = pagePane;
        setCenter(pagePane);
    

style.css 文件中 ButtonBarPane 的自定义 CSS：

.root 
    /* ButtonBarPane Colors */
    BUTTON_BAR_PANE_TOOLBAR: #e9e9e9;
    BUTTON_BAR_PANE_BORDER: #c9c9c9;;
    BUTTON_BAR_PANE_TEXT: #333333;
    BUTTON_BAR_PANE_SELECTED: #c5c5c5;


/*******************************************************************************
 * ButtonBarPane                                                               *
 ******************************************************************************/
.button-bar-pane 
    -fx-padding: 0 0 0 0;


.button-bar-pane > .tool-bar 
    -fx-background-color: BUTTON_BAR_PANE_TOOLBAR;
    -fx-padding: 3 3 0 5;
    -fx-border-color: transparent, BUTTON_BAR_PANE_BORDER;
    -fx-border-width: 0 0 1 0;
    -fx-border-style: solid;


.button-bar-pane > .tool-bar .button 
    -fx-background-color: transparent;
    -fx-text-fill: BUTTON_BAR_PANE_TEXT;


.button-bar-pane > .tool-bar .button:pressed 
    -fx-background-color: BUTTON_BAR_PANE_SELECTED;
    -fx-background-radius: 5 5 0 0;


.button-bar-pane > .tool-bar .button.selected 
    -fx-background-color: BUTTON_BAR_PANE_SELECTED;
    -fx-background-radius: 5 5 0 0;

演示应用：

import control.ButtonBarPane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class HelloFX extends Application 

    @Override
    public void start(Stage stage) 
        ButtonBarPane bbpPages = new ButtonBarPane();
        // TODO Add here your login and register nodes as page node component.
        bbpPages.addPage("Login", new Label("Login content here..."));
        bbpPages.addPage("Register", new Label("Register content here..."));

        bbpPages.setMinWidth(640);
        bbpPages.setPrefWidth(640);
        bbpPages.setMaxWidth(640);

        VBox vbox = new VBox(bbpPages);
        Scene scene = new Scene(vbox, 640, 480);
        scene.getStylesheets().add("style.css");
        stage.setScene(scene);
        stage.setTitle("JavaFX App");
        stage.show();
    

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

截图：