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

Question

我正在做一个简单的计算器，问题出在按钮上。当我点击它们时，它们在底部略微收缩，这是我不想做的。此外，当我单击 textArea 时，白点消失了，但是当我单击按钮时，textArea 周围的点再次显示。为什么？如何使它们永久不可见？我试图在 .button:pressed 代码中放入 css，将按钮的大小设置为正常大小，但它不起作用。无论如何，它们正在缩小。Main.javapackage gui;public class Main {    public static void main(String[] args){Calculator.main(args);}}样式.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;}

Answer 1

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

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

在这里阅读

要删除 textArea 角中的黑点，您可以将屏幕包裹到 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;

    }

再次阅读这里

对我来说效果很好。

以及未来的一些提示：

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

• 阅读并执行您的 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();

        });