JavaFx 元素，根据 window 的大小动态更改大小

Question

我有这个：一个 borderPane，左节点是一个 Vbox（绿色箭头），里面有按钮（橙色箭头）。

我不能做的是找到一种方法来改变 Vbox（绿色部分）的尺寸，然后根据 window 的大小改变按钮（橙色部分）的尺寸。（当用户玩 window 尺寸时）

我更喜欢找到一种方法将参数设置到我的 css 文件中，或者作为在我的 fxml 中设置参数的最后手段。

.css 文件:

.left-borderPane{ /*this is style class for Vbox */
/*something so similar: */
-fx-min-width:30% ;
-fx-max-width:30% ;
}

.icon-settings{/*this is style class for buttons*/
-fx-shape:"M72.5,65.9 M90,50c0,8.6-2.5,16.9-7.3,24.1c-0.4,0.6-1,0.9-1.7,0.9c-0.4,0-0.8-0.1-1.1-0.3c-0.9-0.6-1.2-1.8-0.6-2.50zM69.6,50c0,3.2-0.6,6.2-1.8,9.1c-0.3,0.8-1.1,1.2-1.8,1.2c-0.2,0-0.5,0-0.8-0.1c-1-0.4c0.6-0.6,1.4-0.7,2.2-0.4C57.5,14.5,58,15.2,58,16z M35,37H14v26h21V37z M54,20.8l-15,15v28.3l15,15V20.8z";
/*something so similar: */
-fx-min-width:80% ;
-fx-max-width:80% ;
    }

Answer 1

与网络不同，即 HTML+CSS，JavaFX+CSS NOT 从 CSS.您必须将左侧面板的大小绑定到 window 的大小（很可能通过简单的计算），并将按钮的大小绑定到面板的大小（再次通过简单的计算）。下面代码演示原理：

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BoundSizes extends Application {
    @Override
    public void start(Stage primaryStage) {
        BorderPane borderPane = new BorderPane();
        VBox vbox = new VBox();
        Button b = new Button("THE BUTTON");
        vbox.getChildren().add(b);
        borderPane.setLeft(vbox);

        // the VBox stays e.g. 1/3 of the window width
        vbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 3.0));
        // painting it to be obvious
        vbox.setStyle("-fx-background-color: black");

        // the button stays e.g. at half the width of the VBox
        b.prefWidthProperty().bind(Bindings.divide(vbox.widthProperty(), 2.0));

        Scene scene = new Scene(borderPane, 300, 275);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String arg[]) {
        launch(arg);
    }
}

Answer 2

使用 GridPane 调整大小percentWidth/percentHeight 列和行约束

您提到您想在 CSS 或 FXML 中执行此操作。 CSS 在 JavaFX 中不会这样做，它主要用于样式而不是布局。 FXML 旨在完成大部分布局工作（最好与 Gluon SceneBuilder 结合使用）。

这里尝试仅使用 FXML 设计您的布局。使用的主要容器是 GridPane。要根据可用区域的百分比设置网格窗格区域的大小，ColumnConstraints and RowConstraints are used with a percentWidth and percentHeight。 min/max/pref 封闭控件（在本例中为按钮）的大小已设置为填充可用区域。

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0"
          prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.65">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="30.0"/>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
    <ColumnConstraints hgrow="SOMETIMES"/>
  </columnConstraints>
  <rowConstraints>
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
    <RowConstraints vgrow="SOMETIMES"/>
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
  </rowConstraints>
  <children>
    <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0"
            mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.halignment="CENTER"
            GridPane.rowIndex="1" GridPane.valignment="CENTER"/>
  </children>
</GridPane>

来自其他类似问题的信息

有很多方法可以动态更改元素大小，其中一些将在以下帖子中讨论。可能值得回顾不同的技术以确定最适合您的情况。

javafx automatic resizing and button padding
JavaFX fullscreen - resizing elements based upon screen size
JavaFX correct scaling
Bind Font Size in JavaFX?

Answer 3

这对我有用

hbox.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));
hbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 12.0));

button.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 10.0));

button.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));

JavaFx 元素，根据 window 的大小动态更改大小

JavaFx elements, change the size dynamically in relationship to the size of the window

css

layout

javafx

fxml

scenebuilder