java - 如何使按钮在 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>

这是一个屏幕截图:请注意，我用光标调整了屏幕大小以显示它，因为这是正确的，而不是屏幕的大小

如您所见，按钮不是它们的常规尺寸。

这是与您在屏幕截图中看到的 3 个主要按钮关联的 CSS 文件(如果需要)

#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

如果您想要动态尺寸，则不应使用最小/首选/最大尺寸。相反，您应该使用适当的布局容器。对于您的示例，您可以使用 e. G。一个

• 整个屏幕的VBox
• 该 VBox 中的顶部和底部 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。