我正在开发一个迷你项目来创建一个beatbox应用程序,我使用JavaFX作为设计工具的UI和场景构建器。当我在那里放置组件时,我可以看到它不是全屏但是当我将它与Eclipse IDE链接时。我将舞台设置为设置全屏模式,但我将组件放置在最左边,但我想对齐自己。
primaryStage.setMaximized(true);
primaryStage.setMaximized(true);
它必须自动对齐,但不能像它左边那样。
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXProgressBar?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox prefHeight="400.0" prefWidth="640.0"
xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1" fx:controller="box.firstcontroller">
<children>
<AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0"
prefWidth="-1.0" style="-fx-background-color: #78909C;"
VBox.vgrow="ALWAYS">
<children>
<JFXProgressBar layoutX="203.0" layoutY="333.0" />
<ImageView fitHeight="186.0" fitWidth="164.0" layoutX="53.0"
layoutY="94.0" pickOnBounds="true" preserveRatio="true">
<cursor>
<Cursor fx:constant="S_RESIZE" />
</cursor>
<image>
<Image url="@../login.png" />
</image>
</ImageView>
<ImageView fitHeight="164.0" fitWidth="151.0" layoutX="410.0"
layoutY="101.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../signup.png" />
</image>
</ImageView>
<Label layoutX="251.0" layoutY="36.0" text="BeatBox">
<font>
<Font name="Tempus Sans ITC" size="41.0" />
</font>
</Label>
<JFXButton fx:id="signup" buttonType="RAISED" layoutX="68.0"
layoutY="314.0" onAction="#signupform" prefHeight="44.0"
prefWidth="115.0" ripplerFill="#752f2f" style="-fx-background-color:
#ae2121;" text="Sign Up" textFill="#fcfcfcf2">
<font>
<Font name="Webdings" size="20.0" />
</font>
</JFXButton>
<JFXButton fx:id="signin" layoutX="428.0" layoutY="312.0"
onAction="#signinform" prefHeight="17.0" prefWidth="115.0" style="-
fx-background-color: #ae2121;" text="Sign In" textFill="WHITE">
<font>
<Font size="20.0" />
</font>
</JFXButton>
</children>
</AnchorPane>
</children>
</VBox>
~
你实际上有几个问题正在发生。首先,你的根VBox
有一个AnchorPane
作为它的子元素,它反过来包含各个节点。
这会导致您被迫手动设置这些节点的X / Y坐标。这个设计很差。
相反,您应该使用JavaFX提供的各种布局窗格来处理为您布置节点。
这是一个非常基本的例子,类似于你的布局,它是完全可扩展的:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox alignment="TOP_CENTER" spacing="10.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
</padding>
<children>
<Label text="BeatBox">
<font>
<Font name="Tempus Sans ITC" size="48.0"/>
</font>
</Label>
<HBox alignment="CENTER" spacing="10.0" VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Sign Up"/>
<ProgressBar prefWidth="200.0" progress="0.0"/>
<Button mnemonicParsing="false" text="Sign In"/>
</children>
</HBox>
</children>
</VBox>
请注意,我在标题下使用HBox
水平布局按钮。无需手动设置坐标或大小;让JavaFX为您完成工作!
结果:
场景生成器层次结构: