将旋转的工具项包装在一个组中，然后工具栏的内置布局将知道旋转是永久的，在布局计算时应考虑到该旋转，而不仅仅是可能用于动画的临时事物.阅读 Group 的 javadoc，其中讨论了布局边界计算以更好地理解这一点。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="100.0" style="-fx-background-color: cornsilk;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ToolBar orientation="VERTICAL" style="-fx-base: palegreen;">
<items>
<Group>
<children>
<Button rotate="-90.0" style="-fx-base: gold;" text="Project" />
</children>
</Group>
<Group>
<children>
<Button rotate="-90.0" style="-fx-base: khaki;" text="Structure" />
</children>
</Group>
</items>
</ToolBar>
</children>
</HBox>
2017 年 4 月 24 日更新
就目前而言，上述解决方案很好，但确实存在一个问题，即工具栏中的按钮在获得焦点时会错位。
组所做的是根据其内容调整自身大小。当内容的大小发生变化时，组的大小也会发生变化。当一个按钮或控件在 JavaFX 中获得焦点时，它会在控件周围获得一个focus ring。对焦环的显示在 CSS 中定义，并且包含背景插入显示的负值。结果是，当一个控件被聚焦时，它比没有聚焦时略大。通常，当您使用标准布局窗格时，这不是问题，因为布局窗格只会出于布局目的而忽略背景插图。然而，一个组会考虑全尺寸并且不会忽略聚焦环。结果是，仅包含一个控件的组在聚焦或不聚焦时大小会略有变化。这给上述解决方案带来了问题，因为当一个按钮成为焦点时，它会变得稍大，并且工具栏中的布局会发生变化，这并不理想。
上述代码中焦点偏移问题的解决方案是只在一个组内旋转整个 ToolBar，而不是在一个组内每个按钮旋转每个按钮。这工作正常，但随后会出现一些其他问题，例如工具栏没有占据场景左侧的整个可用区域（由于将其包装在一个组中，删除了工具栏的动态布局属性）。为了解决这个问题，可以使用代码中的绑定来调整 ToolBar 的大小，使其适应其父布局容器的可用区域。
所以我们最终得到了下面稍微详细一点的解决方案：
skinsample/toolbar.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.Group?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.control.ToggleGroup?>
<BorderPane fx:id="border" prefHeight="200.0" prefWidth="100.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="skinsample.VerticalToolbarController">
<left>
<Group>
<fx:define>
<ToggleGroup fx:id="selectedTool"/>
</fx:define>
<ToolBar fx:id="toolbar" rotate="-90.0" style="-fx-base: palegreen;">
<Pane HBox.hgrow="ALWAYS" />
<ToggleButton style="-fx-base: khaki;" text="Structure" toggleGroup="${selectedTool}"/>
<ToggleButton style="-fx-base: gold;" text="Project" toggleGroup="${selectedTool}" selected="true"/>
</ToolBar>
</Group>
</left>
</BorderPane>
skinsample/VerticalToolbarController.java
package skinsample;
import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.BorderPane;
public class VerticalToolbarController {
@FXML
private BorderPane border;
@FXML
private ToolBar toolbar;
public void initialize() {
toolbar.minWidthProperty().bind(Bindings.max(border.heightProperty(), toolbar.prefWidthProperty()));
}
}
skinsample/ToolDisplayApp.java
package skinsample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class ToolDisplayApp extends Application {
@Override
public void start(Stage stage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("toolbar.fxml"));
Scene scene = new Scene(loader.load());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
注意事项：
- 此解决方案还演示了使用 ToggleButtons 而不是 ToolBar 中的标准按钮。
-
我们还消除了 ToolBar 的默认溢出行为（因为它在垂直工具栏的情况下似乎有点烦人），使用：
toolbar.minWidthProperty().bind(Bindings.max(border.heightProperty(), toolbar.prefWidthProperty()));
-
如果要保留溢出行为，请使用：
toolbar.prefWidthProperty().bind(border.heightProperty());
焦点问题的替代解决方案（使用 CSS 完全移除焦点环）如下所示：