Question

我试图格式化TabPane，其中Tabs在TabPane的左侧是垂直的。标签文本需要是水平的。将文本旋转到水平位置时会发生此问题。对于垂直文本，该选项卡似乎是自动调整大小的;然后，它变得水平而不调整选项卡的大小。结果是标签的高度不同（取决于旋转前文本标签的长度）。我尝试了3种不同的解决方案，我在其他问题中找到了，但都没有。有工作的解决方案吗？（Java 1.8u144）

----- Attempt #1 - CSS and Text Attribute -----

CSS

.tab .tab-label {
    -fx-rotate: 90;  /*PROBLEM: it sizes height using vertical text before rotating, messes up H. */
}

FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" text="Select">
            <Label text="Select"/>
        </Tab>
        <Tab fx:id="tab2" closable="false" text="Log">
            <Label text="Log"/>
        </Tab>
        <Tab fx:id="tab3" closable="false" text="Schedules">
            <Label text="Schedules"/>
        </Tab>
    </tabs>
</TabPane>

----- Attempt #2 - Java replace tab-label with Graphic -----

CSS

.tab .tab-label {
    -fx-rotate: 90;  /*PROBLEM: it sizes height using vertical text before rotating, messes up H. */
}

Java Controller

@FXML private Tab tab1;
@FXML private Tab tab2;
@FXML private Tab tab3;

@Override
public void initialize(URL url, ResourceBundle rb) {
    tab1.setGraphic(new Label("Select"));
    tab2.setGraphic(new Label("Log"));
    tab3.setGraphic(new Label("Schedules"));
}


FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" >
            <Label text="Select" />
        </Tab>
        <Tab fx:id="tab2" closable="false">
            <Label text="Log" />
        </Tab>
        <Tab fx:id="tab3" closable="false">
            <Label text="Schedules" />
        </Tab>
    </tabs>
</TabPane>

----- Attempt #3 - FXML replace tab-label with Graphic -----

FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" >
            <graphic>
                <Group >
                    <Label text="Select" rotate="90"/>
                </Group>
            </graphic>
            <Label text="Select" />
        </Tab>
        ...

Answer 1

我会回答我自己的问题，因为我找到了解决方案，并提供了一个例子。使用问题中的FXML方法......

<TabPane side="LEFT" rotateGraphic="true" >
<tabs>
    <Tab fx:id="tab1" closable="false" >
        <graphic>
            <Group >
                <Label text="Select" rotate="90"/>
            </Group>
        </graphic>
        <Label text="Select" />
    </Tab>
    ...

解决方案所需的额外步骤是添加CSS ....

.tab-pane .tab-header-area .tab {
-fx-pref-height: 150;
-fx-pref-width: 50;}

...重新调整标签标签的大小以适应90度标签旋转。

JavaFX：使用垂直选项卡和水平选项卡标签格式化TabPane

1 个答案: