JavaFX：如何制作合适的垂直工具栏？

我想用垂直排列的按钮制作一个垂直工具栏。在LinuxMint中使用JDK7中包含的

JavaFX2.2

屏幕截图显示了问题：

我使用的

FXML

如下所示：

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

<?language javascript?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane prefHeight="800.0" prefWidth="700.0" styleClass="root" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <ToolBar>
            <items>
                <Button text="Test" />
            </items>
        </ToolBar>

    </top>
    <left>
        <ToolBar orientation="VERTICAL" style="-fx-background-color: blue;">
            <items>

                        <Region style="-fx-padding:10;" />
                        <Button rotate="-90" text="Project" style="-fx-label-padding:1;"/>
                        <Region style="-fx-padding:10;" />
                        <Button rotate="-90" text="Structure" />

            </items>
        </ToolBar>
    </left>
    <center>
        <HBox>
            <children>
            </children>
        </HBox>
    </center>
    <bottom>
        <ToolBar prefHeight="18.0" prefWidth="472.0">
            <items>
                <Region styleClass="spacer" />
                <HBox>
                    <children>

                    </children>
                </HBox>
            </items>
        </ToolBar>
    </bottom>

</BorderPane>

---

在我的定义中，合适的工具栏是：按钮放置正确，工具栏的宽度与按钮的宽度相同。蓝色表示工具栏当前的宽度。

将旋转的工具项包装在一个组中，然后工具栏的内置布局将知道旋转是一个永久性的，在布局计算中应该考虑到旋转，而不仅仅是一个可能用于动画的临时对象。阅读javadoc for，其中讨论了布局边界计算，以更好地理解这一点

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

skinsample/ToolDisplayApp.java

注:

此解决方案还演示了在工具栏中使用切换按钮而不是标准按钮

我们还消除了工具栏的默认溢出行为（因为在垂直工具栏的情况下似乎有点烦人），使用：

如果要保留溢出行为，请使用：

toolbar.prefWidthProperty().bind(border.heightProperty());

---

焦点问题的替代解决方案（使用CSS完全移除焦点环）如所示：

用于对齐工具栏中的项目：有关说明，请参阅。如果您不需要进行任何额外的对齐，可以将其忽略。

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()));
    }
}

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);
    }

}

toolbar.minWidthProperty().bind(Bindings.max(border.heightProperty(), toolbar.prefWidthProperty()));

toolbar.prefWidthProperty().bind(border.heightProperty());