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

Question

我想制作一个垂直排列的垂直工具栏.使用JavaFX 2.2它包含JDK 7在Linux Mint中.

屏幕截图显示了问题:

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

我定义中的正确工具栏是:按钮正确放置,工具栏宽度与按钮宽度相同.蓝色表示工具栏当前的宽度.

Answer 1

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

<?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中获得焦点时,它会在控件周围获得一个焦点环.聚焦环的显示在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);
    }

}

笔记:

1. 此解决方案还演示了使用ToggleButtons而不是ToolBar中的标准按钮.

2. 我们还消除了ToolBar的默认溢出行为(因为它在垂直工具栏情况下看起来有点烦人),使用:

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

3. 如果要保留溢出行为,请使用:

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

焦点问题的另一种解决方案(使用CSS完全删除焦点环),如下所示:

• JavaFX - 如何防止工具栏更改按钮状态更改的宽度.