Java FX：仅用FXML设置Stack Pane子元素的百分比宽度

嘿，作为JavaFX新手能有这样的思考真的很棒——完全赞同你的想法，GridPane对于仅两个子元素来说确实有点冗余，StackPane是更轻量的选择！下面我给你两种实用的实现方式，不管你用纯Java代码还是FXML都能轻松搞定：

一、纯Java代码实现 #

这种方式适合喜欢用代码直接构建UI的场景，核心思路是将子元素的宽高属性绑定到父StackPane的宽高属性上，确保子元素能随父容器自动缩放：

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

public class StackPaneLayoutDemo extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 创建父StackPane容器
        StackPane parentPane = new StackPane();
        
        // 创建第一个子元素（这里用Button举例，你可以换成任意Node）
        Button leftElement = new Button("左侧内容");
        // 绑定宽度为父容器的50%，高度为父容器的100%
        leftElement.prefWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        leftElement.prefHeightProperty().bind(parentPane.heightProperty());
        // 可选：绑定最小/最大宽高，避免窗口缩放时子元素变形
        leftElement.minWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        leftElement.maxWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        leftElement.minHeightProperty().bind(parentPane.heightProperty());
        leftElement.maxHeightProperty().bind(parentPane.heightProperty());

        // 创建第二个子元素
        Button rightElement = new Button("右侧内容");
        rightElement.prefWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        rightElement.prefHeightProperty().bind(parentPane.heightProperty());
        // 同样绑定最小/最大宽高
        rightElement.minWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        rightElement.maxWidthProperty().bind(parentPane.widthProperty().multiply(0.5));
        rightElement.minHeightProperty().bind(parentPane.heightProperty());
        rightElement.maxHeightProperty().bind(parentPane.heightProperty());
        
        // 将子元素添加到父容器
        parentPane.getChildren().addAll(leftElement, rightElement);
        
        // 配置场景并显示
        Scene scene = new Scene(parentPane, 800, 600);
        primaryStage.setTitle("StackPane子元素布局演示");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

二、FXML实现 #

如果习惯用FXML编写UI结构，直接在FXML中通过表达式绑定属性即可，代码更直观：

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>

<StackPane fx:id="parentPane" xmlns:fx="http://javafx.com/fxml/1">
    <!-- 第一个子元素 -->
    <Button text="左侧内容"
            prefWidth="${parentPane.width * 0.5}"
            prefHeight="${parentPane.height}"
            minWidth="${parentPane.width * 0.5}"
            maxWidth="${parentPane.width * 0.5}"
            minHeight="${parentPane.height}"
            maxHeight="${parentPane.height}"/>
    
    <!-- 第二个子元素 -->
    <Button text="右侧内容"
            prefWidth="${parentPane.width * 0.5}"
            prefHeight="${parentPane.height}"
            minWidth="${parentPane.width * 0.5}"
            maxWidth="${parentPane.width * 0.5}"
            minHeight="${parentPane.height}"
            maxHeight="${parentPane.height}"/>
</StackPane>

额外小提示 #

StackPane默认会让所有子元素居中重叠显示，如果你的需求是两个子元素左右并排（而不是重叠），其实用HBox会更省心——不过既然你选定了StackPane，也可以通过调整子元素的偏移量来实现并排：

在代码中给右侧元素添加：

rightElement.translateXProperty().bind(parentPane.widthProperty().multiply(0.25));

给左侧元素添加：

leftElement.translateXProperty().bind(parentPane.widthProperty().multiply(-0.25));

这样两个元素就会左右分开，各自占满50%宽度啦～

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD