如何在 Javafx 中展開標簽欄

Question

我正在嘗試使用 Javafx 中的 TabPane 實現登錄和注冊菜單。 標簽欄的默認外觀就像第一張圖片。 我想知道如何使標簽欄看起來像第二張圖片（我為第二張截圖 xD 操作圖像）。 我的問題與此問題類似，但在 Java 中。 我很感激任何評論。 謝謝。

Answer 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);
    }

}

自定義 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();
    }

}

截屏：