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

时间：2015-04-23 04:12:20

标签： java css button javafx fxml

所以当程序启动时按钮看起来正常但是如果用光标水平或垂直减小窗口大小，按钮会缩小到更小的尺寸。

代码

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>

以下是截图：请注意，我使用光标调整屏幕大小以显示此项，因为这不是屏幕大小

enter image description here

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

以下是与您在屏幕截图中看到的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); 
}

2 个答案:

答案 0 :(得分：1)

如果您想拥有动态尺寸，则不应使用min / pref / max尺寸。相反，你应该使用适当的布局容器。对于你的例子，你可以使用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。

答案 1 :(得分：0)

在按钮上设置最小尺寸，如pref尺寸。这应该有用。

@edit：您可以将resizable属性设置为false

相关问题
最新问题