java - 为什么按钮在点击时调整大小

Question

我正在做一个简单的计算器，问题出在按钮上。当我点击它们时，它们在底部略微收缩，这是我不想做的。此外，当我单击 textArea 时，白点消失了，但是当我单击按钮时，textArea 周围的点再次显示。为什么？如何让它们永久不可见？

我试图在 .button:pressed 代码中放入 css，将按钮的大小设置为正常大小，但它不起作用。无论如何，它们正在缩小。

主.java

package gui;

public class Main {
    public static void main(String[] args){Calculator.main(args);}
}

计算器.java

package gui;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class Calculator extends Application {
    public static void main(String[] args){
        launch(args);
    }

    private TextArea screen;
    private Button button0, button1, button2, button3, button4, button5, button6, button7, button8, button9, buttonPlus, buttonMinus,
    buttonDevide, buttonTimes, buttonEqual, buttonDot, buttonSign, buttonClear, buttonPercent, buttonClose, buttonMinimalize;
    @Override
    public void start(Stage primaryStage) throws Exception {

        StackPane stackPane = new StackPane();
        Pane pane = new Pane();
        buttonClose = new Button(" ");
        buttonClose.setId("buttonClose");
        buttonMinimalize = new Button();
        buttonMinimalize.setId("buttonMinimalize");
        buttonClose.setLayoutX(0);
        buttonClose.setLayoutY(0);
        pane.getChildren().add(buttonClose);
        buttonMinimalize.setLayoutX(15);
        buttonMinimalize.setLayoutY(-1);
        pane.getChildren().add(buttonMinimalize);
        buttonClose.setOnAction(e->System.exit(0));
        buttonMinimalize.setOnAction(e->primaryStage.setIconified(true));


        primaryStage.initStyle(StageStyle.TRANSPARENT);
        primaryStage.setTitle("Calculator");
        //primaryStage.getIcons().add(new Image(Calculator.class.getResourceAsStream("Icon.png"))); - Don't worry, I hid this for you
        GridPane gridPane = new GridPane();
        gridPane.setAlignment(Pos.CENTER);
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(10,10,10,10));

        gridPane.add(pane,0,0);
        //Buttons
        int row = 1;
        screen = new TextArea();
        screen.setId("screen");
        screen.setEditable(false);
        gridPane.add(screen,0,row,4,1);

        row++;
        buttonClear = new Button("AC");
        buttonClear.setId("buttonClear");
        gridPane.add(buttonClear,0,row);

        buttonSign = new Button("+/-");
        buttonSign.setId("buttonSign");
        gridPane.add(buttonSign,1,row);

        buttonPercent = new Button("%");
        buttonPercent.setId("buttonPercent");
        gridPane.add(buttonPercent,2,row);

        buttonDevide = new Button("/");
        buttonDevide.setId("buttonDevide");
        gridPane.add(buttonDevide,3,row);

        row++;
        button7 = new Button("7");
        gridPane.add(button7,0,row);

        button8 = new Button("8");
        gridPane.add(button8,1,row);

        button9 = new Button("9");
        gridPane.add(button9,2,row);

        buttonTimes = new Button("x");
        buttonTimes.setId("buttonTimes");
        gridPane.add(buttonTimes,3,row);

        row++;
        button4 = new Button("4");
        gridPane.add(button4,0,row);

        button5 = new Button("5");
        gridPane.add(button5,1,row);

        button6 = new Button("6");
        gridPane.add(button6,2,row);

        buttonMinus = new Button("-");
        buttonMinus.setId("buttonMinus");
        gridPane.add(buttonMinus,3,row);

        row++;
        button1 = new Button("1");
        gridPane.add(button1,0,row);

        button2 = new Button("2");
        gridPane.add(button2,1,row);

        button3 = new Button("3");
        gridPane.add(button3,2,row);

        buttonPlus = new Button("+");
        buttonPlus.setId("buttonPlus");
        gridPane.add(buttonPlus,3,row);

        row++;
        button0 = new Button("0");
        button0.setId("button0");
        gridPane.add(button0,0,row,2,1);

        buttonDot = new Button(".");
        gridPane.add(buttonDot,2,row);

        buttonEqual = new Button("=");
        buttonEqual.setId("buttonEqual");
        gridPane.add(buttonEqual,3,row);

        stackPane.getChildren().add(gridPane);

        //---------------------- DRAG AND DROP
        final Delta dragDelta = new Delta();
        stackPane.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent mouseEvent) {
                // record a delta distance for the drag and drop operation.
                dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
                dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
            }
        });
        stackPane.setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent mouseEvent) {
                primaryStage.setX(mouseEvent.getScreenX() + dragDelta.x);

                primaryStage.setY(mouseEvent.getScreenY() + dragDelta.y);
            }
        });
        //------------------------ END OF DRAG AND DROP

        Scene scene = new Scene(stackPane,250,480);
        scene.setFill(Color.TRANSPARENT);
        scene.getStylesheets().add(Calculator.class.getResource("Style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setMinHeight(480);
        primaryStage.setMinWidth(250);
        primaryStage.show();
    }
}
class Delta { double x, y; }

样式.css

.root{
    -fx-background-color: #000;
    -fx-background-radius: 10;
}
#screen{
    -fx-pref-height: 150px;
    -fx-pref-width: 230px;
    -fx-control-inner-background: #000000;
    -fx-focus-color: #000000;
    -fx-text-box-border: #000000;
    -fx-background-color: #000000;

    -fx-focus-color: black;
    -fx-faint-focus-color: black;
    -fx-text-box-border: black;
}
.button{
    -fx-pref-height: 50px;
    -fx-pref-width: 50px;
    -fx-background-radius: 100;
    -fx-font-size: 15;
    -fx-font-Weight: bold;
    -fx-background-color: #333333;
    -fx-text-fill: #FFFFFF;
}
.button:hover{
    -fx-background-color: #3d3d3d;
}
.button:pressed{
    -fx-background-color: #2e2e2e;
}
#button0{
    -fx-pref-height: 50px;
    -fx-pref-width: 110px;
}
#buttonPercent, #buttonClear, #buttonSign{
    -fx-background-color: #A5A5A5;
    -fx-text-fill: #000000;
}
#buttonPercent:hover, #buttonClear:hover, #buttonSign:hover{
    -fx-background-color: #b0b0b0;
    -fx-text-fill: #000000;
}
#buttonPercent:pressed, #buttonClear:pressed, #buttonSign:pressed{
    -fx-background-color: #969696;
    -fx-text-fill: #000000;
}
#buttonDevide, #buttonTimes, #buttonMinus, #buttonPlus, #buttonEqual{
    -fx-background-color: #FD9500;
}
#buttonDevide:hover, #buttonTimes:hover, #buttonMinus:hover, #buttonPlus:hover, #buttonEqual:hover{
    -fx-background-color: #ffa421;
}
#buttonDevide:pressed, #buttonTimes:pressed, #buttonMinus:pressed, #buttonPlus:pressed, #buttonEqual:pressed{
    -fx-background-color: #f08e00;
}
#buttonClose{
    -fx-background-color: #e00000;
    -fx-background-radius: 100;
    -fx-pref-height: 10px;
    -fx-pref-width: 10px;
    -fx-font-size: 1px;
}
#buttonMinimalize{
    -fx-background-color: #1045c2;
    -fx-background-radius: 100;
    -fx-pref-height: 10px;
    -fx-pref-width: 10px;
    -fx-font-size: 1px;
}

Answer 1

要删除此按钮效果，请将其添加到 Style.css 中的 .button

    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

To read here

要删除 textArea Angular 中的黑点，您可以将屏幕包裹到 Pane 中:

    Pane blackPane = new Pane();
    blackPane.setId("blackPane");
    screen = new TextArea();
    screen.setId("screen");
    screen.setEditable(false);
    blackPane.getChildren().add(screen);
    gridPane.add(blackPane, 0, row, 4, 1);

并添加 CSS 属性:

    #blackPane #screen {
    -fx-background-color: black;
    -fx-background-radius: 0;
    }

Again to read here

在我的案例中效果很好。

还有一些关于 future 的提示:

• 不要将 View 层与控制层混在一起，这会使您的代码变得一团糟。添加 .fxml 文件，您可以在其中创建 View 。您可以使用 Scene Builder 以清晰的方式轻松构建 View .

• 阅读并执行您的 IDE(推荐 Intellij)的建议。你有很多重复和复杂的、错误的代码格式。例如:

  stackPane.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override
      public void handle(MouseEvent mouseEvent) {
          // record a delta distance for the drag and drop operation.
          dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
          dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
      }
  });
  

可以这样替换:

stackPane.setOnMousePressed(mouseEvent -> {
            // record a delta distance for the drag and drop operation.
            dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();
            dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();
        });