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

<?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的动态布局属性).为了解决这个问题,可以使用代码中的绑定来将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完全删除焦点环),如下所示：

> JavaFX – How to prevent Toolbar from changing width on button state changes.