JavaFX：如何製作合適的垂直工具欄？

Question

我想製作垂直排列按鈕的垂直工具欄。在Linux Mint中使用包含在JDK 7中的JavaFX 2.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> 

在我的定義正確的工具欄是：按鈕都正確放置和工具欄與按鈕的寬度一樣寬。藍色表示工具欄當前的寬度。

Answer 1

將您的旋轉工具項目包裝在一個組中，然後工具欄的內置佈局將知道旋轉是永久性的，應該將其考慮在佈局計算中，而不只是臨時性的東西，可能用於動畫。閱讀javadoc的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中獲得焦點時，它會在控件周圍獲得一個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); 
    } 

} 

注：

1. 該解決方案還說明了工具條中使用的ToggleButtons的，而不是標準的按鈕。

2. 我們還省去了工具欄的默認溢出行爲（因爲它在垂直工具欄的情況似乎有點討厭），使用：

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

3. 如果您想保留溢出行爲，然後使用：

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

---

一種替代的解決方案將焦點問題（使用CSS以除去焦點ř ）呈現在：

• JavaFX - How to prevent Toolbar from changing width on button state changes。