Question

所以我使用的是一个GridPane，目的是让它的子注释调整大小以填充提供给GridPane的可用空间，这些空间是根据组件添加到网格时分配给它们的部分。我花时间在SO上查看类似的问题，但是没有任何弹出的解决方案似乎有用，或者符合我的要求。基本上我想要这样的东西和动态调整大小：

如果我在CSS或代码中调整按钮min，max和pref尺寸，我可以这样做。我发现这个按钮会调整窗口大小调整大小，但即使我将宽度和高度的pref max设置为一个非常大的值，它们仍然保持如上所示，即它们不会占据整个屏幕，如下所示。值得注意的是，Magenta颜色应用于GridPane而不是它所居住的AnchorPane，因此它显然占用了所有空间本身，但没有按比例分配给孩子。

如果我取出CSS指定的pref，min和max维度并且只在Java代码中保留setMaxSize指令，则窗口都被绘制得很小。如下所示。

以下是SCE。（我知道代码可以被优化，但它只是一个简单而明确的例子）。

JAVA： 包裹申请;

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


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            ButtonPanel2 bp = new ButtonPanel2();
            root.setCenter(bp);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }//end start

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


class ButtonPanel2 extends AnchorPane {

    GridPane grid;

    Button ba, bb, bc, bd;


    /**Construct a new button panel object.**/
    public ButtonPanel2(){
        //Create Grid and gaps
        grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);

        grid.prefWidthProperty().bind(this.widthProperty());
        grid.getStyleClass().add("test");

        //Init buttons
        ba = new Button("A");
        bb = new Button("B");
        bc = new Button("C");
        bd = new Button("D");

        //Apply CSS styles for size
        ba.getStyleClass().add("button1");
        bb.getStyleClass().add("buttonH2");
        bc.getStyleClass().add("buttonV2");
        bd.getStyleClass().add("button2");

        ba.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bd.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

        //Add items to grid.
        //Node, colIndex, rowIndex, colSpan, rowSpan
        grid.add(ba,0,0,1,1);//
        grid.add(bb,1,0,2,1);//
        grid.add(bc,0,1,1,2);//
        grid.add(bd,1,1,2,2);//

        GridPane.setFillHeight(ba, true);
        GridPane.setFillHeight(bb, true);
        GridPane.setFillHeight(bc, true);
        GridPane.setFillHeight(bd, true);

        GridPane.setFillWidth(ba, true);
        GridPane.setFillWidth(bb, true);
        GridPane.setFillWidth(bc, true);
        GridPane.setFillWidth(bd, true);


        //anchor grid to parent container (anchor)
        AnchorPane.setTopAnchor(grid, 0.0);
        AnchorPane.setBottomAnchor(grid, 0.0);
        AnchorPane.setLeftAnchor(grid, 0.0);
        AnchorPane.setRightAnchor(grid, 0.0);

        this.getChildren().add(grid);

        this.getStyleClass().add("test");
    }//end buttonPanel2

}//end buttonPanel2

CSS：

.buttonV2{
    -fx-min-width: 50px;
    -fx-min-height:100px;
    -fx-max-width: 200px;
    -fx-max-height:100px;
    -fx-pref-width: 75px;
    -fx-pref-height:150px; 
}

.buttonH2{
    -fx-min-width: 100px;
    -fx-min-height:50px;
    -fx-max-width: 200px;
    -fx-max-height:100px;
    -fx-pref-width: 150px;
    -fx-pref-height:75px; 
}

.button1 {
    -fx-min-width: 50px;
    -fx-min-height:50px;
    -fx-max-width: 100px;
    -fx-max-height:100px;
    -fx-pref-width: 75px;
    -fx-pref-height:75px; 
}

.button2 {
    -fx-min-width: 100px;
    -fx-min-height:100px;
    -fx-max-width: 200px;
    -fx-max-height:200px;
    -fx-pref-width: 150px;
    -fx-pref-height:150px; 
}

.test{
    -fx-background-color: #ff00ff;
}

.test2{
        -fx-background-color: #00ffff;
}

Answer 1

这是使用SceneBuilder创建的示例布局，其中包含几个不同大小的预览场景。您可以看到，随着大小的变化，每个按钮的比例大小保持不变。这是通过在GridPane的行和列上设置60:40 constraints来实现的。

该解决方案还使用tip for sizing and aligning nodes：

要使所有按钮的大小调整为...窗格的宽度，每个按钮的最大宽度设置为Double.MAX_VALUE常量，这样可以使控件无限制地增长。

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

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.rowIndex="1" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.rowIndex="1" />
   </children>
</GridPane>

上面的布局是使用Gluon的SceneBuilder在大约3分钟内完成的。我发现它是一个很好的工具，用于理解各种布局类型和约束。

通常AnchorPane适用于固定大小的布局。如果您想要一个动态大小的布局，通常首选不同的布局窗格类型，这就是答案仅使用GridPane而不是AnchorPane的原因。

将最大尺寸设置为Double.MAX_VALUE。我明白了，但感觉就像这样的黑客。

是的，一开始看起来就是这样，特别是因为只有某些控件（如按钮）需要MAX_VALUE设置，而不是像StackPanes这样的其他布局。但是在你习惯它之后，它从未真正困扰过我。经验法则是布局试图做你可能“通常”想要的事情。通常，您不希望按钮增长到任何大小，但要保持其首选大小。当然，这并不总是你想要的，这就是为什么你可以覆盖默认值以允许不受限制的增长，如此处所示。

Answer 2

好的，在Jewelsea的一些指示之后，答案在于使用RowConstraints和ColumnConstraints来定义给出每行和列的百分比比例，从而将网格的所有子组件的MaxSize设置为更大的值比你曾经显示的（Double.MAX_VALUE）。

这使得布局及其组件在调整舞台大小时按比例增长和缩小。代码如下：

包裹申请;

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

JAVA CODE：

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            ButtonPanel2 bp = new ButtonPanel2();
            root.setCenter(bp);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }//end start

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


class ButtonPanel2 extends AnchorPane {

    GridPane grid;

    Button ba, bb, bc, bd;


    /**Construct a new button panel object.**/
    public ButtonPanel2(){
        //Create Grid and gaps
        grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);

        grid.prefWidthProperty().bind(this.widthProperty());
        grid.getStyleClass().add("test");

        //Init buttons
        ba = new Button("A");
        bb = new Button("B");
        bc = new Button("C");
        bd = new Button("D");


        ba.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bd.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

        //Add items to grid.
        //Node, colIndex, rowIndex, colSpan, rowSpan
        grid.add(ba,0,0,1,1);//
        grid.add(bb,1,0,2,1);//
        grid.add(bc,0,1,1,2);//
        grid.add(bd,1,1,2,2);//


        //Grid contstraints.
        RowConstraints row1 = new RowConstraints();
        row1.setPercentHeight(25);
        RowConstraints row2 = new RowConstraints();
        row2.setPercentHeight(75);

        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(25);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(75);

        grid.getRowConstraints().addAll(row1,row2);
        grid.getColumnConstraints().addAll(col1,col2);


        //anchor grid to parent container (anchor)
        AnchorPane.setTopAnchor(grid, 0.0);
        AnchorPane.setBottomAnchor(grid, 0.0);
        AnchorPane.setLeftAnchor(grid, 0.0);
        AnchorPane.setRightAnchor(grid, 0.0);

        this.getChildren().add(grid);

        this.getStyleClass().add("test");
    }//end buttonPanel2

}//end buttonPanel2

CSS：

.buttonV2{
    -fx-min-width: 50px;
    -fx-min-height:100px;
    -fx-max-width: 9999px;
    -fx-max-height:9999px;
    -fx-pref-width: 75px;
    -fx-pref-height:150px; 
}

.buttonH2{
    -fx-min-width: 100px;
    -fx-min-height:50px;
    -fx-max-width: 200px;
    -fx-max-height:100px;
    -fx-pref-width: 150px;
    -fx-pref-height:75px; 
}

.button1 {
    -fx-min-width: 50px;
    -fx-min-height:50px;
    -fx-max-width: 100px;
    -fx-max-height:100px;
    -fx-pref-width: 75px;
    -fx-pref-height:75px; 
}

.button2 {
    -fx-min-width: 100px;
    -fx-min-height:100px;
    -fx-max-width: 200px;
    -fx-max-height:200px;
    -fx-pref-width: 150px;
    -fx-pref-height:150px; 
}

.test{
    -fx-background-color: #ff00ff;
}

.test2{
        -fx-background-color: #00ffff;
}

JavaFX GridPane动态调整子节点以填充指定区域

2 个答案: