Question

我有这个： https://stackoverflow.com/a/40228894/4891738 带有左侧节点的borderPane带有按钮的Vbox（绿色箭头）（橙色箭头）。

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

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

.css文件：

{{1}}

Answer 1

使用GridPane百分比宽度/百分比高度列和行约束进行调整

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

这是尝试使用FXML设计您的布局。使用的主要容器是GridPane。要根据可用区域的百分比设置网格窗格区域的大小，ColumnConstraints和RowConstraints将与percentWidth和percentHeight一起使用。设置封闭控件的最小/最大/首字母大小（在本例中为按钮），以便它们填充可用区域。

<?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>

来自其他类似问题的信息

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

Answer 2

与Web不同，即HTML + CSS，JavaFX + CSS NOT 从CSS进行定位和调整。您必须将左侧面板的大小绑定到窗口的大小（通过最简单的计算），并将按钮的大小绑定到面板的大小（再次通过简单的计算）。以下代码演示了原则：

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 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元素，动态地改变大小与窗口的大小

3 个答案: