Question

我希望我的tabpane中的标签符合它们所在的tabpane的完整大小。所以基本上没有标题区域可见，所有内容都应该由标签覆盖。

我有两个问题：

如何使标签动态适应tabpane的宽度？
如何将它们安装到正确的高度，并移除标签之间的小空间？我想这是通过css完成的，但我不太清楚如何。

招呼

Answer 1

您可以简单地将侦听器添加到TabPane中，以检测任何更改并相应地调整选项卡的宽度和/或高度。

@FXML
private JFXTabPane tabPane;

用许多标签来划分宽度。因此，如果您有2个，请执行以下操作：

tabPane.widthProperty().addListener((observable, oldValue, newValue) ->
    {
        tabPane.setTabMinWidth(tabPane.getWidth() / 2);
        tabPane.setTabMaxWidth(tabPane.getWidth() / 2);      
    });

Answer 2

我不确定这是否可以在CSS中使用，并且在Java中可能有一种更简单的方法来执行此操作，但我编写了一个扩展TabPane的类，以便拉伸选项卡以填充所有空间。

public class StretchedTabPane extends TabPane {

    public StretchedTabPane() {
        super();
        setUpChangeListeners();
    }

    public StretchedTabPane(Tab... tabs) {
        super(tabs);
        setUpChangeListeners();
    }

    private void setUpChangeListeners() {

        widthProperty().addListener(new ChangeListener<Number>() {
            @Override public void changed(ObservableValue<? extends Number> value, Number oldWidth, Number newWidth) {
                Side side = getSide();
                int numTabs = getTabs().size();
                if ((side == Side.BOTTOM || side == Side.TOP) && numTabs != 0) {
                    setTabMinWidth(newWidth.intValue() / numTabs - (20));
                    setTabMaxWidth(newWidth.intValue() / numTabs - (20));
                }
            }
        });

        heightProperty().addListener(new ChangeListener<Number>() {
            @Override public void changed(ObservableValue<? extends Number> value, Number oldHeight, Number newHeight) {
                Side side = getSide();
                int numTabs = getTabs().size();
                if ((side == Side.LEFT || side == Side.RIGHT) && numTabs != 0) {
                    setTabMinWidth(newHeight.intValue() / numTabs - (20));
                    setTabMaxWidth(newHeight.intValue() / numTabs - (20));
               }
           }
        });

        getTabs().addListener(new ListChangeListener<Tab>() {
            public void onChanged(ListChangeListener.Change<? extends Tab> change){
                Side side = getSide();
                int numTabs = getTabs().size();
                if (numTabs != 0) {
                    if (side == Side.LEFT|| side == Side.RIGHT) {
                        setTabMinWidth(heightProperty().intValue() / numTabs - (20));
                        setTabMaxWidth(heightProperty().intValue() / numTabs - (20));
                    }
                    if (side == Side.BOTTOM || side == Side.TOP) {
                        setTabMinWidth(widthProperty().intValue() / numTabs - (20));
                        setTabMaxWidth(widthProperty().intValue() / numTabs - (20));
                    }
                }
            }
        });
   }
}

当标签的高度，宽度或数量发生变化时，这将自动调整每个标签的宽度。

Answer 3

确实，标签的属性对象是READ-Only。这意味着您无法手动设置属性。但是，只读属性的值可以绑定到其他属性，属性也有一些操作方法，例如：划分，减去，请查看文档以获取更多信息。

您可以调用tabpane上的.tabminWidthProperty()并将其绑定到布局父级的width-property值。

以下是用于调整所有可用选项卡大小的代码，同样填满整个屏幕：

tabpane.tabMinWidthProperty().bind(root.widthProperty().divide(tabpane.getTabs().size()).subtract(20));

我减去20以避免水平/垂直滚动条。当然还有一种方法可以禁止它们弹出，但我是一名Android Dev和JavaFx中的新手。

Answer 4

它可以直接在 fxml 文件中完成，并且可以在没有 fitToWidth 或 fitToHeight 属性的任何节点上使用。看下面的小例子，希望对大家有帮助。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
        fx:controller="somepackage.MainWindowController"
        prefHeight="400.0" prefWidth="600.0"
fx:id="mainPane">
<TabPane prefHeight="${mainPane.height}" prefWidth="${mainPane.width}" style="-fx-background-color: blue">
    <Tab fx:id="someTab">
        <Label text="bla bla">
    </Tab>
</TabPane>

我想指出导致 Tab 扩展的主要部分：

<块引用>

prefHeight="${mainPane.height}" prefWidth="${mainPane.width}"

JavaFX Tab适合标题的完整大小

4 个答案: