问题描述

我想制作一个垂直工具栏，该工具栏带有垂直布置的按钮.使用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>

我定义中的适当工具栏是:按钮正确放置，工具栏与按钮的宽度一样宽.蓝色表示工具栏当前的宽度.

推荐答案

将您的旋转工具项包裹在一个组中，然后，工具栏的内部布局将知道旋转是一个永久的，应该考虑到布局计算，而不仅仅是临时事物用于动画.阅读 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中定义，并包含背景插图显示的负值.结果是，当对照聚焦时，它比不集中的时稍大.通常，当您使用标准布局窗格时，这不是问题，因为布局窗格只会出于布局目的而忽略背景插图.但是，组考虑了整个尺寸，并且不会忽略焦点环.结果是，仅由控制的组组成的组在集中或不关注时会稍微改变大小.这提出了上面解决方案的问题，因为当按钮聚焦时，它将变得稍大，并且工具栏的布局变化，这不是理想的.

上面代码中焦点移位问题的解决方案是将整个工具栏旋转在组中，而不是每个按钮中的组中的每个按钮.这可以正常工作，但随后提出了其他一些问题，例如工具栏不占用场景左侧的整个可用区域(由于将其包裹在删除工具栏的动态布局属性的组中).为了解决这个问题，代码中的绑定可用于将工具栏大小到其父布局容器的可用区域.

因此，我们最终得到了下面的详细解决方案:

skinsample/toolbar.fxml

<?xml version=" 1.0"="" encoding="UTF-8" gt;="" <?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" gt;="" </fx:define>="" <toolbar="" fx:id="toolbar" rotate="-90.0" style="-fx-base: palegreen;" >="" <pane="" hbox.hgrow="ALWAYS" gt;="" <togglebutton="" style="-fx-base: khaki;" text="Structure" togglegroup="${selectedTool}" gt;="" <togglebutton="" style="-fx-base: gold;" text="Project" togglegroup="${selectedTool}" selected="true" gt;="" </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.minWidthProperty().bind(Bindings.max(border.heightProperty(), toolbar.prefWidthProperty()));


如果要保留溢出行为，请使用:
toolbar.prefWidthProperty().bind(border.heightProperty());



对焦点问题的替代解决方案(使用CSS完全删除焦点环)，以:
表示

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


                                                    

以上所述是小编给大家介绍的JavaFX：如何制作一个合适的垂直工具栏？,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对77isp云服务器技术网的支持！