在调整 window 大小时,如何使 Javafx 中的元素不与另一个元素重叠?
How can I make an element in Javafx not overlap with another when resizing the window?
我正在 Java 上制作一个简单的 UI 应用程序。我在它下面有一个 Listview 和一个进度条。当您第一次 运行 应用程序时, UI 很好,但是当我调整 window 的大小时,列表视图会按应有的方式扩展,但会被进度条掩盖,进度条保持固定在顶部的原始点并在底部延伸。
有没有办法让 window 调整大小时,列表视图和进度条按比例放大/缩小?
我尝试在两个元素之间添加一个容器并将其设置为始终垂直增长,但它也不起作用。
main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.learning.javaui.Controller">
<MenuBar VBox.vgrow="NEVER">
<Menu mnemonicParsing="false" text="File">
<MenuItem fx:id="quitMenuItem" mnemonicParsing="false" text="Quit" />
</Menu>
</MenuBar>
<AnchorPane VBox.vgrow="ALWAYS">
<SplitPane dividerPositions="0.3322884012539185" layoutX="77.0" layoutY="79.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<GridPane layoutX="20.0" layoutY="10.0" prefHeight="30.0" prefWidth="189.0" AnchorPane.leftAnchor="15.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" minWidth="50.0" prefWidth="100.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<TextField fx:id="nameField" prefHeight="25.0" promptText="Enter Name" GridPane.halignment="LEFT" GridPane.hgrow="ALWAYS" />
<Button fx:id="saveButton" mnemonicParsing="false" text="Save" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
</GridPane>
<ListView fx:id="names" layoutX="10.0" layoutY="43.0" prefHeight="330.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="40.0" />
<ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
</AnchorPane>
<TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
</SplitPane>
</AnchorPane>
</VBox>
截图:
当应用最初是 运行 时:
How it should look
当我调整 window 的大小时,元素重叠:
Elements after window is resized
删除 AnchorPane.topAnchor="530.0"
在:
<ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
正如 James 所说,AnchorPane
在这种情况下不推荐。我个人喜欢主要在布局中使用 VBox
和 HBox
。当节点需要堆叠或并排时,它们非常有用。当且仅当节点需要并排堆叠时,我才会使用 GridPane
。下面的示例代码。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox prefHeight="500.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.learning.javaui.Controller">
<MenuBar VBox.vgrow="NEVER">
<Menu mnemonicParsing="false" text="File">
<MenuItem fx:id="quitMenuItem" mnemonicParsing="false" text="Quit" />
</Menu>
</MenuBar>
<SplitPane dividerPositions="0.3322884012539185" prefHeight="160.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" spacing="20.0">
<children>
<TextField fx:id="nameField" maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="100.0" promptText="Enter Name">
<HBox.margin>
<Insets left="20.0" />
</HBox.margin>
</TextField>
<Button fx:id="saveButton" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" text="Save" />
</children>
<VBox.margin>
<Insets bottom="5.0" top="10.0" />
</VBox.margin>
</HBox>
<ListView fx:id="names" VBox.vgrow="ALWAYS">
<VBox.margin>
<Insets left="5.0" right="5.0" />
</VBox.margin>
</ListView>
<ProgressBar progress="0.0">
<VBox.margin>
<Insets top="2.0" />
</VBox.margin>
</ProgressBar>
</children>
</VBox>
<TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
</SplitPane>
</VBox>
我正在 Java 上制作一个简单的 UI 应用程序。我在它下面有一个 Listview 和一个进度条。当您第一次 运行 应用程序时, UI 很好,但是当我调整 window 的大小时,列表视图会按应有的方式扩展,但会被进度条掩盖,进度条保持固定在顶部的原始点并在底部延伸。
有没有办法让 window 调整大小时,列表视图和进度条按比例放大/缩小?
我尝试在两个元素之间添加一个容器并将其设置为始终垂直增长,但它也不起作用。
main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.learning.javaui.Controller">
<MenuBar VBox.vgrow="NEVER">
<Menu mnemonicParsing="false" text="File">
<MenuItem fx:id="quitMenuItem" mnemonicParsing="false" text="Quit" />
</Menu>
</MenuBar>
<AnchorPane VBox.vgrow="ALWAYS">
<SplitPane dividerPositions="0.3322884012539185" layoutX="77.0" layoutY="79.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<GridPane layoutX="20.0" layoutY="10.0" prefHeight="30.0" prefWidth="189.0" AnchorPane.leftAnchor="15.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" minWidth="50.0" prefWidth="100.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<TextField fx:id="nameField" prefHeight="25.0" promptText="Enter Name" GridPane.halignment="LEFT" GridPane.hgrow="ALWAYS" />
<Button fx:id="saveButton" mnemonicParsing="false" text="Save" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
</GridPane>
<ListView fx:id="names" layoutX="10.0" layoutY="43.0" prefHeight="330.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="40.0" />
<ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
</AnchorPane>
<TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
</SplitPane>
</AnchorPane>
</VBox>
截图:
当应用最初是 运行 时: How it should look
当我调整 window 的大小时,元素重叠: Elements after window is resized
删除 AnchorPane.topAnchor="530.0"
在:
<ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
正如 James 所说,AnchorPane
在这种情况下不推荐。我个人喜欢主要在布局中使用 VBox
和 HBox
。当节点需要堆叠或并排时,它们非常有用。当且仅当节点需要并排堆叠时,我才会使用 GridPane
。下面的示例代码。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox prefHeight="500.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.learning.javaui.Controller">
<MenuBar VBox.vgrow="NEVER">
<Menu mnemonicParsing="false" text="File">
<MenuItem fx:id="quitMenuItem" mnemonicParsing="false" text="Quit" />
</Menu>
</MenuBar>
<SplitPane dividerPositions="0.3322884012539185" prefHeight="160.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" spacing="20.0">
<children>
<TextField fx:id="nameField" maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="100.0" promptText="Enter Name">
<HBox.margin>
<Insets left="20.0" />
</HBox.margin>
</TextField>
<Button fx:id="saveButton" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" text="Save" />
</children>
<VBox.margin>
<Insets bottom="5.0" top="10.0" />
</VBox.margin>
</HBox>
<ListView fx:id="names" VBox.vgrow="ALWAYS">
<VBox.margin>
<Insets left="5.0" right="5.0" />
</VBox.margin>
</ListView>
<ProgressBar progress="0.0">
<VBox.margin>
<Insets top="2.0" />
</VBox.margin>
</ProgressBar>
</children>
</VBox>
<TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
</SplitPane>
</VBox>