Question

所以我试图通过构建一个简单的计算器来学习javafx，但我似乎无法使按钮调整大小或阻止它们粘在窗口的左侧。

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


public class CalculatorGUI extends Application{

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

@Override
public void start(Stage primaryStage) throws Exception {
    TextField tf = new TextField();
    BorderPane root = new BorderPane();
    GridPane gp = new GridPane();

    root.setTop(tf);

    ColumnConstraints cc = new ColumnConstraints();
    cc.setHgrow(Priority.ALWAYS);
    cc.setFillWidth(true);
    gp.getColumnConstraints().add(cc);


    gp.add(new Button("7"), 0, 0);
    gp.add(new Button("8"), 1, 0);
    gp.add(new Button("9"), 2, 0);
    gp.add(new Button("/"), 3, 0);

    gp.add(new Button("4"), 0, 1);
    gp.add(new Button("5"), 1, 1);
    gp.add(new Button("6"), 2, 1);
    gp.add(new Button("*"), 3, 1);

    gp.add(new Button("1"), 0, 2);
    gp.add(new Button("2"), 1, 2);
    gp.add(new Button("3"), 2, 2);
    gp.add(new Button("-"), 3, 2);

    gp.add(new Button("0"), 0, 3);
    gp.add(new Button("."), 1, 3);
    gp.add(new Button("="), 2, 3);
    gp.add(new Button("+"), 3, 3);



    root.setCenter(gp);

    primaryStage.setScene(new Scene(root, 300, 250));
    primaryStage.show();
}

}

看起来像这样

Answer 1

您应该做的第一件事是为GridPane设置网格线：

gp.setGridLinesVisible(true);

之后，您可以看到布局出了什么问题。

回到代码，您可以将ColumnConstraint添加到GridPane，但正如文档中说明的方法getColumnConstraints：

返回列约束列表。可以添加列约束以显式控制单个列大小和布局行为。如果未设置，则根据内容计算列大小和布局行为。 ObservableList中的索引表示列号，因此第一列的列约束位于0的位置。

这基本上意味着gp.getColumnConstraints()集合中的第一个元素与第一列相关，第二个与第二个相关，依此类推。如果您只是添加：

gp.getColumnConstraints().addAll(cc, cc, cc, cc);

一切都会按预期更多地发挥作用。

提示 - 要使按钮自动调整为网格格式，您可以使用AnchorPane：

final Button button = new Button();
final AnchorPane anchorPane = new AnchorPane(button);
AnchorPane.setBottomAnchor(button, 0.0);
AnchorPane.setLeftAnchor(button, 0.0);
AnchorPane.setRightAnchor(button, 0.0);
AnchorPane.setTopAnchor(button, 0.0);
gp.add(anchorPane, 0, 0);

但是可能有更好的方法来实现这一点 - 更新请参阅下面的James_D评论。

Answer 2

您需要分别设置每个按钮的尺寸。我已经制作了这段代码。检查一下..

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class CalculatorGUI extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        TextField tf = new TextField();
        BorderPane root = new BorderPane();
        GridPane gp = new GridPane();
        gp.setAlignment(Pos.CENTER);
        gp.setHgap(10.0);
        gp.setVgap(10.0);
        root.setTop(tf);

        Button button1 = new Button("1");
        Button button2 = new Button("2");
        Button button3 = new Button("3");
        Button button4 = new Button("4");
        Button button5 = new Button("5");
        Button button6 = new Button("6");
        Button button7 = new Button("7");
        Button button8 = new Button("8");
        Button button9 = new Button("9");
        Button button0 = new Button("0");
        Button buttonDOT = new Button(".");
        Button buttonDIV = new Button("/");
        Button buttonMUL = new Button("*");
        Button buttonSUB = new Button("-");
        Button buttonADD = new Button("+");
        Button buttonEQU = new Button("=");
        setButtonSize(button1);
        setButtonSize(button2);
        setButtonSize(button3);
        setButtonSize(button4);
        setButtonSize(button5);
        setButtonSize(button6);
        setButtonSize(button7);
        setButtonSize(button8);
        setButtonSize(button9);
        setButtonSize(button0);
        setButtonSize(buttonDOT);
        setButtonSize(buttonDIV);
        setButtonSize(buttonMUL);
        setButtonSize(buttonSUB);
        setButtonSize(buttonADD);
        setButtonSize(buttonEQU);

        gp.add(button7, 0, 0);
        gp.add(button8, 1, 0);
        gp.add(button9, 2, 0);
        gp.add(buttonDIV, 3, 0);

        gp.add(button4, 0, 1);
        gp.add(button5, 1, 1);
        gp.add(button6, 2, 1);
        gp.add(buttonMUL, 3, 1);

        gp.add(button1, 0, 2);
        gp.add(button2, 1, 2);
        gp.add(button3, 2, 2);
        gp.add(buttonSUB, 3, 2);

        gp.add(button0, 0, 3);
        gp.add(buttonDOT, 1, 3);
        gp.add(buttonEQU, 2, 3);
        gp.add(buttonADD, 3, 3);

        root.setCenter(gp);

        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public void setButtonSize(Button button){
        button.setPrefHeight(35.0);
        button.setPrefWidth(35.0);
    }
}

Answer 3

感谢您的帮助，最后采用了这种方法

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.TextField;
import javafx.scene.control.Button;

import javafx.scene.layout.Priority;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.application.Application;


public class CalculatorGUI extends Application{

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

@Override
public void start(Stage primaryStage) throws Exception {
    TextField tf = new TextField();
    BorderPane root = new BorderPane();
    GridPane gp = new GridPane();
    Button btn;
    root.setTop(tf);

    RowConstraints rc = new RowConstraints();
    rc.setVgrow(Priority.ALWAYS);
    rc.setFillHeight(true);
    gp.getRowConstraints().addAll(rc,rc,rc,rc);
    ColumnConstraints cc = new ColumnConstraints();
    cc.setHgrow(Priority.ALWAYS);
    cc.setFillWidth(true);
    gp.getColumnConstraints().addAll(cc,cc,cc,cc);


    gp.add(btn = new Button("7"), 0, 0);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("8"), 1, 0);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("9"), 2, 0);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("/"), 3, 0);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    gp.add(btn = new Button("4"), 0, 1);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("5"), 1, 1);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("6"), 2, 1);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("*"), 3, 1);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    gp.add(btn = new Button("1"), 0, 2);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("2"), 1, 2);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("3"), 2, 2);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("-"), 3, 2);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    gp.add(btn = new Button("0"), 0, 3);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("."), 1, 3);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("="), 2, 3);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    gp.add(btn = new Button("+"), 3, 3);
    btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);


    root.setCenter(gp);

    primaryStage.setScene(new Scene(root, 300, 250));
    primaryStage.show();
  }

  }

使用Javafx，尝试调整计算器的框大小

3 个答案: