如何使按鈕在FXML中保持其大小

Question

所以按鈕在程序啓動時看起來很正常，但如果使用水平或垂直方向縮放窗口的大小，按鈕會縮小爲較小的尺寸。

代碼

FXML文件

<?import java.lang.*?> 
<?import java.net.*?> 
<?import javafx.scene.shape.*?> 
<?import javafx.scene.text.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.image.*?> 
<?import java.net.URL?> 

<VBox fx:id="OptionMenuLayout" alignment="TOP_CENTER" spacing="15" prefWidth="1366" prefHeight="768" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.OptionscreenController"> 
    <stylesheets> 
     <URL value="@BackgroundImages.css" /> 
    </stylesheets> 
    <stylesheets> 
     <URL value="@ButtonLayout.css" /> 
    </stylesheets> 
    <children> 
     <ImageView fitHeight="300" fitWidth="300" smooth="true" > 
      <image> 
       <Image url="@ImageFiles/MillionaireLogo1.png" /> 
      </image> 
     </ImageView> 
     <Label style="-fx-font-style: Italic;" text="Click to Change the Background Color" textFill="white"> 
      <font> 
       <javafx.scene.text.Font name="sans-serif" size="20" /> 
      </font> 
     </Label>  
     <HBox alignment="CENTER" spacing="200"> 
      <children> 
       <Button id="SmallBlueBackground1" fx:id="optionButton1" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" /> 
       <Button id="SmallBlueBackground2" fx:id="optionButton2" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" /> 
       <Button id="SmallBlueBackground3" fx:id="optionButton3" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" /> 
      </children> 
     </HBox>  
     <Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" /> 
     <HBox alignment="BOTTOM_RIGHT" spacing="10"> 
      <children> 
       <Button fx:id="backToMain" onAction="#goToTheMainMenu" prefHeight="30" prefWidth="200" id="ButtonLayout" text="Back to the Main Menu"> 
        <shape> 
         <javafx.scene.shape.Rectangle arcHeight="30" arcWidth="30" height="30" width="200" /> 
        </shape> 
       </Button> 
      </children> 
     </HBox> 
    </children> 
</VBox> 

下面是截圖：請注意，我調整了屏幕，我的光標顯示這個，因爲這是對的不是大小屏幕

正如您所看到的，按鈕不是它們的常規尺寸。

這裏是CSS文件，你在截圖中看到像PREF尺寸鍵

#BlueBackground1 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg"); 
    -fx-smooth: true; 
    -fx-background-position: center center; 
} 

#BlueBackground2 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg"); 
    -fx-smooth: true; 
    -fx-background-position: center center; 
} 

#BlueBackground3 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg"); 
    -fx-smooth: true; 
    -fx-background-position: center center; 
} 

#SmallBlueBackground1 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg"); 
    -fx-background-repeat: stretch; 
    -fx-background-size: 80 50; 
    -fx-background-position: center center; 
    -fx-background-insets: 0, 0, 0, 0; 
    -fx-border-color: black; 
    -fx-border-width: 3; 
    -fx-border-style: solid; 
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
} 

#SmallBlueBackground2 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg"); 
    -fx-background-repeat: stretch; 
    -fx-background-size: 80 50; 
    -fx-background-position: center center; 
    -fx-background-insets: 0, 0, 0, 0; 
    -fx-border-color: black; 
    -fx-border-width: 3; 
    -fx-border-style: solid; 
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
} 

#SmallBlueBackground3 
{ 
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg"); 
    -fx-background-repeat: stretch; 
    -fx-background-size: 80 50; 
    -fx-background-position: center center; 
    -fx-background-insets: 0, 0, 0, 0; 
    -fx-border-color: black; 
    -fx-border-width: 3; 
    -fx-border-style: solid; 
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
} 

Answer 1

設置最低大小的3個主要按鈕（如果需要的話）相關聯。這應該工作。

@edit：你可以，如果你想有你不應該使用最小/ PREF /最大尺寸動態尺寸調整大小屬性設置爲false

Answer 2

。相反，你應該使用適當的佈局容器。對於你的例子，你可以使用e。 G。一個

• 垂直框爲整個屏幕
• 一頂部和一底部Stackpane在於垂直框
• 在底部Stackpane一個GridPane爲按鈕

和釋放按鈕的尺寸來計算。

事情是這樣的：

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

<?import javafx.geometry.*?> 
<?import javafx.scene.shape.*?> 
<?import javafx.scene.control.*?> 
<?import java.lang.*?> 
<?import javafx.scene.layout.*?> 


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <StackPane VBox.vgrow="ALWAYS" /> 
     <StackPane VBox.vgrow="ALWAYS"> 
     <children> 
      <GridPane hgap="10.0" vgap="10.0"> 
       <columnConstraints> 
       <ColumnConstraints hgrow="ALWAYS" /> 
       <ColumnConstraints hgrow="ALWAYS" /> 
       </columnConstraints> 
       <rowConstraints> 
       <RowConstraints vgrow="ALWAYS" /> 
       <RowConstraints vgrow="ALWAYS" /> 
       </rowConstraints> 
       <children> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" /> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" /> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" /> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" /> 
       </children> 
       <StackPane.margin> 
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> 
       </StackPane.margin> 
      </GridPane> 
     </children> 
     </StackPane> 
    </children> 
</VBox> 

注： 「1.7976931348623157E308」 值MAX_VALUE場景生成器。