Question

我仍在学习JavaFX，最大的挫败之一是，我在调整窗口大小时不知道如何重新放置按钮（或其他任何元素）。假设我的宽度为500像素，而按钮为250像素。现在，我将窗口的大小调整为1500px。该按钮停留在以前的位置，但是我希望它现在为750 px，因为那是长度的一半。

它是这样的：

first picture

这是在我将窗口大小更改为全屏模式之后，正如您在可怕的图形上看到的那样，我希望按钮也移动，但要移动到“新”中间。

second picture 我真的不确定如何处理此大小调整问题，因此希望你们能为我提供帮助。

提前谢谢！

FXML

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

<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.media.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>

<BorderPane maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" style="-fx-background-color: #FFFFFF;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <center>
      <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1C1C1C;" BorderPane.alignment="CENTER">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" layoutX="-1.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true" />
            <HBox fx:id="hBoxButtons" layoutX="447.0" layoutY="75.0" prefHeight="64.0" prefWidth="256.0">
               <children>
                  <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
               </children>
            </HBox>
            <Button fx:id="stopButton" focusTraversable="false" layoutX="374.0" layoutY="76.0" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
         </children>
      </Pane>
   </bottom>
   <left>
      <Pane prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" BorderPane.alignment="CENTER">
         <children>
            <TextField layoutX="25.0" layoutY="36.0" prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;" />
         </children></Pane>
   </left>
</BorderPane>

Answer 1

在这种情况下，我相信您将BorderPane用作根节点是正确的，但是我个人不喜欢使用BorderPane。我的解决方案使用VBox作为根节点。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.media.MediaView?>

<VBox maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox VBox.vgrow="ALWAYS">
         <children>
            <VBox maxWidth="476.0" prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" HBox.hgrow="ALWAYS">
               <children>
                  <TextField prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;">
                     <VBox.margin>
                        <Insets left="20.0" right="20.0" top="40.0" />
                     </VBox.margin>
                  </TextField>
               </children>
            </VBox>
            <StackPane maxWidth="1444.0" prefHeight="520.0" prefWidth="812.0" HBox.hgrow="ALWAYS">
               <children>
                  <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" />
               </children>
            </StackPane>
         </children>
      </HBox>
      <HBox prefHeight="200.0" style="-fx-background-color: #1C1C1C;">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" pickOnBounds="true" preserveRatio="true" />
            <StackPane prefHeight="150.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
               <children>
                  <HBox fx:id="hBoxButtons" maxHeight="-Infinity" maxWidth="-Infinity" spacing="1.0">
                     <children>
                        <Button fx:id="stopButton" focusTraversable="false" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px;">
                           <HBox.margin>
                              <Insets right="10.0" />
                           </HBox.margin>
                        </Button>
                        <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px;" />
                     </children>
                  </HBox>
               </children>
            </StackPane>
         </children>
      </HBox>
   </children>
</VBox>

使按钮适应JavaFX中的窗口大小调整（重新定位）

1 个答案: