JavaFX：使用垂直制表符和水平制表符标签格式化制表符栏

问题描述：

我试图格式化TabPane，其中制表符在TabPane的左侧是垂直的。标签文本需要水平。当文本旋转到水平位置时发生问题。看起来该选项卡是自动调整垂直文本大小的;那么，它会变成水平的，而不会调整标签大小。结果是制表符的高度不同（取决于文本标签在旋转之前的长度）。我已经尝试了3个不同的解决方案，我发现在其他问题，但没有工作。有没有工作解决方案？（Java 1.8u144）JavaFX：使用垂直制表符和水平制表符标签格式化制表符栏

----- 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> 
     ...

答

自从我找到解决方案并提供示例以后，我会回答我自己的问题。使用来自问题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：使用垂直制表符和水平制表符标签格式化制表符栏

相关推荐