JavaFX：在窗口（舞台）上移動元素以調整大小

Question

我在JavaFX上有一個簡單的應用程序，它實際上由幾個窗格和按鈕組成。 我不知道如何在調整舞台大小時使按鈕移動。 因此，我希望即使在調整窗口大小時，左下方按鈕也始終可見。

這是節點概述：

這是fxml：

 <?xml version="1.0" encoding="UTF-8"?> <?import com.jfoenix.controls.JFXButton?> <?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?> <?import javafx.geometry.Insets?> <?import javafx.geometry.Point3D?> <?import javafx.scene.layout.AnchorPane?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.VBox?> <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="750.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1"> <children> <BorderPane layoutX="89.0" layoutY="64.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <left> <AnchorPane prefHeight="150.0" prefWidth="150.0" style="-fx-background-color: #4059a9 #4059a9;" BorderPane.alignment="CENTER"> <children> <AnchorPane prefHeight="750.0" prefWidth="75.0" style="-fx-background-color: #2b4496 #2b4496;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="75.0" AnchorPane.topAnchor="0.0"> <children> <VBox alignment="CENTER" prefHeight="750.0" prefWidth="75.0" spacing="35.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <children> <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="82.0" VBox.vgrow="ALWAYS"> <graphic> <FontAwesomeIconView fill="WHITE" glyphName="HOME" size="2em" /> </graphic> <VBox.margin> <Insets top="25.0" /> </VBox.margin> </JFXButton> <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="75.0"> <VBox.margin> <Insets bottom="10.0" top="600.0" /> </VBox.margin> <graphic> <FontAwesomeIconView fill="WHITE" glyphName="SIGN_OUT" size="2em" /> </graphic> <opaqueInsets> <Insets /> </opaqueInsets> </JFXButton> </children> </VBox> </children> <rotationAxis> <Point3D /> </rotationAxis> </AnchorPane> </children> </AnchorPane> </left> </BorderPane> </children> </AnchorPane> 

Answer 1

您的問題是在Buttons上設置的邊距。 請遵循此布局。 我使用HBox作為根節點。

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

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <VBox alignment="CENTER" prefWidth="75.0" style="-fx-background-color: #2b4496 #2b4496;">
         <children>
            <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="82.0" VBox.vgrow="ALWAYS">
               <graphic>
                  <FontAwesomeIconView fill="WHITE" glyphName="HOME" size="2em" />
               </graphic>
               <VBox.margin>
                  <Insets top="25.0" />
               </VBox.margin>
            </JFXButton>
            <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" opacity="0.0" VBox.vgrow="ALWAYS" />
            <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="75.0">
               <VBox.margin>
                  <Insets bottom="25.0" />
               </VBox.margin>
               <graphic>
                  <FontAwesomeIconView fill="WHITE" glyphName="SIGN_OUT" size="2em" />
               </graphic>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
            </JFXButton>
         </children>
      </VBox>
      <VBox prefHeight="200.0" prefWidth="75.0" style="-fx-background-color: #4059a9 #4059a9;" />
      <AnchorPane prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
   </children>
</HBox>

Answer 2

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <left>
      <VBox BorderPane.alignment="CENTER">
         <children>
            <Button mnemonicParsing="false" text="Button" />
            <AnchorPane VBox.vgrow="ALWAYS" />
            <Button mnemonicParsing="false" text="Button" />
         </children>
      </VBox>
   </left>
</BorderPane>

在VGROW設置為ALWAYS的情況下，在中間添加一個空窗格。

Answer 3

看起來您可以通過使用BorderPane和具有覆蓋背景填充的VBox以及始終在按鈕之間插入的Region來實現相同的效果：

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

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Region?>

<BorderPane prefHeight="750.0" prefWidth="1000.0"
    xmlns="http://javafx.com/javafx/9.0.4"
    xmlns:fx="http://javafx.com/fxml/1">
    <left>
        <VBox alignment="TOP_LEFT"
            spacing="35.0"
            style="-fx-background-color: #2b4496, #4059a9; -fx-background-insets: 0, 0 0 0 75;"> <!-- overlay 2 backgrounds produce rectangles -->
            <padding>
                <Insets right="75.0" />
            </padding>
            <children>
                <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="82.0"  VBox.vgrow="NEVER">
                    <graphic>
                        <FontAwesomeIconView fill="WHITE" glyphName="HOME" size="2em" />
                     </graphic>
                     <VBox.margin>
                        <Insets top="25.0" />
                     </VBox.margin>
                  </JFXButton>
                  <Region VBox.vgrow="ALWAYS" /> <!-- filler -->
                  <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="75.0" VBox.vgrow="NEVER">
                     <VBox.margin>
                        <Insets bottom="10.0" />
                     </VBox.margin>
                     <graphic>
                        <FontAwesomeIconView fill="WHITE" glyphName="SIGN_OUT" size="2em" />
                     </graphic>
                 </JFXButton>
            </children>
        </VBox>
    </left>
</BorderPane>