在 JavaFX 中更改 TabPane 的 Tab 大小

Question

Can we change the tab's size of TabPane in JavaFX? I am using SceneBuilder but it seems it doesn't offer any customozation of the tab's size

Currently I have something like this

.

What I want is basically the tabs to fill the parent and when it is clicked it will show the other forms like this (I made it with button as only the rough image)

Is it possible to do something like this? Any help is appreciated. Thanks

Answer 1

As far as I know the width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height, -fx-min-height ,-fx-border-width and -fx-border-height to adjust the size of Java FX elements.

You can do what you want by using Css:

.tab {

    -fx-pref-width: 250
} 
.tab-header-background {
    -fx-background-color:transparent
}

.tab-pane{
    -fx-padding: 0 -1 -1 -1
}

Answer 2

We can set minimum/maximum width/height for all Tabs on TabPane.

@FXML
TabPane tabPane;

and somewhere:

tabPane.setTabMinWidth(33);
tabPane.setTabMinHeight(33);
tabPane.setTabMaxWidth(69);
tabPane.setTabMaxHeight(69);

Answer 3

You can acheieve this with property binding:

val binding = tabPaneParent.widthProperty().doubleBinding(tabPane.tabs) {
    it as Double / tabPane.tabs.size // - 30
}

tabPane.tabMinWidthProperty().bind(binding)
tabPane.tabMaxWidthProperty().bind(binding)

tabPaneParent is the Node in which tabPane lives, doubleBinding is TornadoFX's equivlant of Bindings#createDoubleBinding .

This will react to the user resizing your window, as well as, the tabs count increasing/decreasing.