JavaFX按钮大小调整 - HBox和VBox无法正确对齐并且间隙可见

时间:2018-05-05 00:32:30

标签: button javafx layout-manager vbox hbox

我正在尝试学习JavaFX,我正在构建一个计算器,并且我遇到了一些我需要指导的按钮大小调整行为。

首先,为什么包含零点和按钮的HBox似乎在右侧有一些像素空闲? https://imgur.com/a/faAEJm6

其次,如何让等于按钮占据它所在的HBox内部或多或少的水平空间?我已尝试设置其首选宽度方法,但这没有任何区别。我想我的问题与空间有限时节点的大小有关。

完整的课程如下。我所做的是为每行数字按钮和点按钮创建一个HBox。然后将这三行放在VBox中,VBox放在等号按钮旁边的HBox中。

我正在阅读JavaFX for Dummies,并查看了许多帖子等,但无法解决这个问题!

package calculator;

import javafx.application.*;
import static javafx.application.Application.launch;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class UserInterface extends Application {

    static int buttonHeight = 30;
    VBox pane;

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

    @Override
    public void start(Stage primaryStage) throws Exception {

//4, 5, 6 numeric buttons 
        //Six button
        Button b6 = new Button("6");
        b6.setMaxWidth(Double.MAX_VALUE);
        b6.setPrefHeight(b6.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b6, Priority.ALWAYS);

        //Five button
        Button b5 = new Button("5");
        b5.setMaxWidth(Double.MAX_VALUE);
        b5.setPrefHeight(b5.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b5, Priority.ALWAYS);

        //Four button
        Button b4 = new Button("4");
        b4.setMaxWidth(Double.MAX_VALUE);
        b4.setPrefHeight(b4.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b4, Priority.ALWAYS);

        //Place the buttons in the 456 HBox
        HBox row456 = new HBox();
        row456.getChildren().addAll(b4, b5, b6);

//1, 2, 3 numeric buttons
        //Button three
        Button b3 = new Button("3");
        b3.setMaxWidth(Double.MAX_VALUE);
        b3.setPrefHeight(b3.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b3, Priority.ALWAYS);

        //Button two
        Button b2 = new Button("2");
        b2.setMaxWidth(Double.MAX_VALUE);
        b2.setPrefHeight(b2.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b2, Priority.ALWAYS);

        //Button one
        Button b1 = new Button("1");
        b1.setMaxWidth(Double.MAX_VALUE);
        b1.setPrefHeight(b1.getPrefHeight() + buttonHeight);
        HBox.setHgrow(b1, Priority.ALWAYS);

        //Place the buttons in the 123 HBox
        HBox row123 = new HBox();
        row123.getChildren().addAll(b1, b2, b3);

//Zero and point buttons
        //zero button
        Button zero = new Button("0");
        zero.setMaxWidth(Double.MAX_VALUE);
        zero.setPrefHeight(zero.getPrefHeight() + buttonHeight);
        HBox.setHgrow(zero, Priority.ALWAYS);

        //point button
        Button point = new Button(".");
        point.setMaxWidth(Double.MAX_VALUE);
        point.setPrefHeight(point.getPrefHeight() + buttonHeight);
        HBox.setHgrow(point, Priority.ALWAYS);

        //Place the buttons in the zeroPoint HBox
        HBox zeroPoint = new HBox();
        zeroPoint.setMaxWidth(Double.MAX_VALUE);
        HBox.setHgrow(zeroPoint, Priority.ALWAYS);
        zeroPoint.getChildren().addAll(zero, point);


//Numeric button rows in a VBox
        VBox intLower = new VBox(row456, row123, zeroPoint);
        HBox.setHgrow(intLower, Priority.ALWAYS);


//Equals button
        Button equals = new Button("=");
        HBox.setHgrow(equals, Priority.ALWAYS);
        equals.setMaxWidth(Double.MAX_VALUE);
        equals.setMaxHeight(Double.MAX_VALUE);

// Numeric button VBox and  equals button inside HBox
        HBox lower = new HBox(intLower, equals);
        lower.setAlignment(Pos.BOTTOM_CENTER);


//Populate the root pane
        pane = new VBox();
        pane.getChildren().addAll(lower);
        pane.setAlignment(Pos.BOTTOM_CENTER);

//Add the root pane to a scene
        Scene scene = new Scene(pane, 210, 285);
        // Finish and show the stage
        primaryStage.setResizable(false);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Calculator");
        primaryStage.show();

    }
}

编辑: 我现在尝试使用GridPane来组装这个GUI,并且我遇到了同样的问题,行没有正确对齐,节点之间可见的小空间 - 看起来就像你拿最便宜的报价来翻新厨房后来发现那个没有一个橱柜紧密齐平:https://imgur.com/a/lXUbHIv

package calculator;

import javafx.application.*;
import static javafx.application.Application.launch;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class UserInterface extends Application {

    private static int butHeightModifier = 30;
    private static int appWidth = 225 * 2;
    private static int appHeight = 310 * 2;
    private static int numRows = 7;
    private static int numCols = 5;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
//7, 8, 9 numeric buttons 
        //Nine button
        Button b9 = new Button("9");
        b9.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b9, Priority.ALWAYS);
        VBox.setVgrow(b9, Priority.ALWAYS);

        //Eight button
        Button b8 = new Button("8");
        b8.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b8, Priority.ALWAYS);
        VBox.setVgrow(b8, Priority.ALWAYS);

        //Seven button
        Button b7 = new Button("7");
        b7.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b7, Priority.ALWAYS);
        VBox.setVgrow(b7, Priority.ALWAYS);

        //Place the buttons in the 456 HBox
        HBox row789 = new HBox();
        row789.getChildren().addAll(b7, b8, b9);

//4, 5, 6 numeric buttons 
        //Six button
        Button b6 = new Button("6");
        b6.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b6, Priority.ALWAYS);
        VBox.setVgrow(b6, Priority.ALWAYS);

        //Five button
        Button b5 = new Button("5");
        b5.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b5, Priority.ALWAYS);
        VBox.setVgrow(b5, Priority.ALWAYS);

        //Four button
        Button b4 = new Button("4");
        b4.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b4, Priority.ALWAYS);
        VBox.setVgrow(b4, Priority.ALWAYS);

        //Place the buttons in the 456 HBox
        HBox row456 = new HBox();
        row456.getChildren().addAll(b4, b5, b6);

//1, 2, 3 numeric buttons
        //Button three
        Button b3 = new Button("3");
        b3.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b3, Priority.ALWAYS);
        VBox.setVgrow(b3, Priority.ALWAYS);

        //Button two
        Button b2 = new Button("2");
        b2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b2, Priority.ALWAYS);
        VBox.setVgrow(b2, Priority.ALWAYS);

        //Button one
        Button b1 = new Button("1");
        b1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(b1, Priority.ALWAYS);
        VBox.setVgrow(b1, Priority.ALWAYS);

        //Place the buttons in the 123 HBox
        HBox row123 = new HBox();
        row123.getChildren().addAll(b1, b2, b3);

//Zero and point buttons
        //zero button
        Button zero = new Button("0");
        zero.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(zero, Priority.ALWAYS);
        VBox.setVgrow(zero, Priority.ALWAYS);

        //point button
        Button point = new Button(".");
        point.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(point, Priority.ALWAYS);
        VBox.setVgrow(point, Priority.ALWAYS);

        //Place the buttons in the zeroPoint HBox
        HBox zeroPoint = new HBox();
        zeroPoint.getChildren().addAll(zero, point);

//Multiply and division buttons
        Button multiply = new Button("X");
        multiply.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(multiply, Priority.ALWAYS);
        VBox.setVgrow(multiply, Priority.ALWAYS);

        Button division = new Button("/");
        division.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(division, Priority.ALWAYS);
        VBox.setVgrow(division, Priority.ALWAYS);

        //Place the buttons in the zeroPoint HBox
        HBox multiDiv = new HBox();
        multiDiv.getChildren().addAll(multiply, division);

//Plus and minus buttons
        Button plus = new Button("+");
        plus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(plus, Priority.ALWAYS);
        VBox.setVgrow(plus, Priority.ALWAYS);

        Button minus = new Button("-");
        minus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        HBox.setHgrow(minus, Priority.ALWAYS);
        VBox.setVgrow(minus, Priority.ALWAYS);

        //Place the buttons in the zeroPoint HBox
        HBox plusMinus = new HBox();
        plusMinus.getChildren().addAll(plus, minus);

//Equals button
        Button equals = new Button("=");
        equals.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Create GridPane
        GridPane grid = new GridPane();

//Set row and collumn constraints
        ColumnConstraints col = new ColumnConstraints();
        col.setPercentWidth(20);
        grid.getColumnConstraints().addAll(col, col, col, col, col);

        RowConstraints row = new RowConstraints();
        row.setPercentHeight(14.2857);
        grid.getRowConstraints().addAll(row, row, row, row, row, row, row);

//Set filling constraint
        for (int r = 0; r <= numRows; r++) {
            RowConstraints rc = new RowConstraints();
            rc.setFillHeight(true);
            rc.setVgrow(Priority.ALWAYS);
            grid.getRowConstraints().add(rc);
        }
        for (int c = 0; c <= numCols; c++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setFillWidth(true);
            cc.setHgrow(Priority.ALWAYS);
            grid.getColumnConstraints().add(cc);
        }

//Add nodes to grid pane
        grid.add(zeroPoint, 0, 6, 3, 1);
        grid.add(equals, 3, 5, 2, 2);
        grid.add(row123, 0, 5, 3, 1);
        grid.add(row456, 0, 4, 3, 1);
        grid.add(row789, 0, 3, 3, 1);
        grid.add(multiDiv, 3, 4, 2, 1);
        grid.add(plusMinus, 3, 3, 2, 1);

// Create the scene and the stage
        Scene scene = new Scene(grid);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Calculator");
        primaryStage.setMinWidth(appWidth);
        primaryStage.setMinHeight(appHeight);
        primaryStage.setResizable(false);
        primaryStage.show();
    }
}

1 个答案:

答案 0 :(得分:0)

GridLines正在显示,以便您可以看到Buttons发生的事情,如等号和小数点按钮。

等于按钮扩展多行,十进制按钮扩展多个列

buttonLayout.add(buttonList.get(11), 3, 0, 1, 4);//Equal Button
buttonLayout.add(buttonList.get(10), 1, 3, 2, 1);//Decimal Button
  

add(Node child,int columnIndex,int rowIndex,int colspan,int rowspan)   将子项添加到指定列,行位置和跨度的网格窗格中。

此代码允许Buttons填充here中的Cells代码。

    for (int rowIndex = 0; rowIndex < 4; rowIndex++) {
        RowConstraints rc = new RowConstraints();
        rc.setVgrow(Priority.ALWAYS) ; // allow row to grow
        rc.setFillHeight(true); // ask nodes to fill height for row
        // other settings as needed...
        buttonLayout.getRowConstraints().add(rc);
    }
    for (int colIndex = 0; colIndex < 4; colIndex++) {
        ColumnConstraints cc = new ColumnConstraints();
        cc.setHgrow(Priority.ALWAYS) ; // allow column to grow
        cc.setFillWidth(true); // ask nodes to fill space for column
        // other settings as needed...
        buttonLayout.getColumnConstraints().add(cc);
    }
  

完整代码:

import java.util.ArrayList;
import java.util.List;
import javafx.application.*;
import static javafx.application.Application.launch;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class UserInterface extends Application {

    VBox root = new VBox();
    MenuBar menuBar = new MenuBar();
    TextField display = new TextField("");
    List<Button> buttonList = new ArrayList();
    GridPane buttonLayout = new GridPane();


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

    @Override
    public void start(Stage primaryStage){

        for(int i = 0; i < 10; i++)
        {
            Button tempButton = new Button(Integer.toString(i));            
            buttonList.add(tempButton);
        }        
        buttonList.add(new Button("."));
        buttonList.add(new Button("="));    


        for(int i = 0; i < buttonList.size(); i++)
        {
            buttonList.get(i).setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        }

        buttonLayout.add(buttonList.get(7), 0, 0);
        buttonLayout.add(buttonList.get(8), 1, 0);
        buttonLayout.add(buttonList.get(9), 2, 0);
        buttonLayout.add(buttonList.get(11), 3, 0, 1, 4);


        buttonLayout.add(buttonList.get(4), 0, 1);
        buttonLayout.add(buttonList.get(5), 1, 1);
        buttonLayout.add(buttonList.get(6), 2, 1);

        buttonLayout.add(buttonList.get(1), 0, 2);
        buttonLayout.add(buttonList.get(2), 1, 2);
        buttonLayout.add(buttonList.get(3), 2, 2);

        buttonLayout.add(buttonList.get(0), 0, 3);
        buttonLayout.add(buttonList.get(10), 1, 3, 2, 1);


        buttonLayout.setGridLinesVisible(true);
        buttonLayout.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        for (int rowIndex = 0; rowIndex < 4; rowIndex++) {
            RowConstraints rc = new RowConstraints();
            rc.setVgrow(Priority.ALWAYS) ; // allow row to grow
            rc.setFillHeight(true); // ask nodes to fill height for row
            // other settings as needed...
            buttonLayout.getRowConstraints().add(rc);
        }
        for (int colIndex = 0; colIndex < 4; colIndex++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setHgrow(Priority.ALWAYS) ; // allow column to grow
            cc.setFillWidth(true); // ask nodes to fill space for column
            // other settings as needed...
            buttonLayout.getColumnConstraints().add(cc);
        }

        VBox.setVgrow(buttonLayout, Priority.ALWAYS);
        root.getChildren().addAll(display, buttonLayout);


        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();        
    }
}

enter image description here