JavaFX - 按钮大小百分比答案

【问题标题】：JavaFX - button size in percentsJavaFX - 按钮大小百分比
【发布时间】：2019-12-17 03:02:20
【问题描述】：

有没有办法用百分比而不是像素值来定义按钮（或任何控件）的大小。我用button.setPrefSize(20,10)；如果我调整窗口大小，按钮的大小保持不变。

我正在开发一个在 Raspberry Pi 上运行的应用程序，我计划设置全屏模式。我有这个示例代码：

import javafx.application.Application;        
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class example extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Button button = new Button();
        button.setPrefSize(300,300);
        BorderPane borderPane = new BorderPane(button);
        Scene scene = new Scene(borderPane);
        primaryStage.setFullScreen(true);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

如果我在我的电脑上运行这段代码，它看起来像这样：

但是当我在屏幕较小的树莓派上运行它时，视图看起来像这样：

（请注意，第二张图片确实比第一张图片更小，而不是按钮更大，也不是两者的按钮大小相同 i 像素）

在两者上，按钮都保持相同的像素大小。

如何以百分比为单位设置按钮大小，所以当我在 Raspberry Pi 中运行它时（或者当我调整窗口大小时相同），它会得到相同的大小？

我不想使用 FXML。

【问题讨论】：

对于某些情况，GridPane 与 Column/RowConstraints 和 percentWidth/Height。您可能需要为每个其他子项添加最多 2 个约束，以防没有一个边界与其他子项的 x/y 坐标相匹配...
请在询问之前做一些研究（在您的代码中看不到任何与大小有关的内容）
如果没有 FXML，您将无法做到这一点。您甚至在帖子的标题中确认了这一点； FXML 控件使用作为 JavaFX 类实例的属性。
我已经在我的真实程序中使用了网格窗格，但这仅有助于控制控件的位置百分比，而不是控件本身的大小

标签： javafx

【解决方案1】：

使用它：

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

【讨论】：

哇，工作，但我不明白它（它是如何工作的，什么是绑定和绑定）有人可以为我解释一下吗？还有，有没有更简单的方法？
如果这是您的 Scene 中的唯一节点，或者如果您对根节点执行此操作，那就太好了。如果你的场景变得更复杂，你应该使用布局节点来正确渲染你的视图。我会听从 fabian 的一些建议。

【解决方案2】：

现在我知道了如何使用网格窗格来做到这一点，只需为您不会拥有的每个控件制作一个带有额外框的网格平移（对于控件本身，而不是控件离开的窗格），并将控件首选项大小设置为Double.MAX_VALUE，然后调整通过指定行和列的百分比大小来指定具有框大小的控件的大小， (column.setPercentWidth(30);row.setPercentWidth(30);),

为了更好地理解如何使用多个控件进行制作，我使用 2 个按钮制作了示例兔子就是例子

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;

public class example extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Button button = new Button();
        button.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
        Button button2 = new Button();
        button2.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);

        GridPane gridPane = new GridPane();
        gridPane.getChildren().addAll(button, button2);

        ColumnConstraints columnConstraints = new ColumnConstraints();
        columnConstraints.setPercentWidth(30);
        ColumnConstraints columnButton = new ColumnConstraints();
        columnButton.setPercentWidth(40);

        RowConstraints rowConstraints = new RowConstraints();
        rowConstraints.setPercentHeight(30);
        RowConstraints rowButton = new RowConstraints();
        rowButton.setPercentHeight(40);

        gridPane.getColumnConstraints().addAll(columnConstraints, columnButton, columnConstraints, columnButton, columnConstraints);
        gridPane.getRowConstraints().addAll(rowConstraints, rowButton, rowConstraints);
        GridPane.setConstraints(button, 1, 1);
        GridPane.setConstraints(button2, 3, 1);

        Scene scene = new Scene(gridPane);

        primaryStage.setMaximized(true);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

hares 一个全屏运行的示例

在调整大小后进行相同的运行

【讨论】：