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

Question

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

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

Main.java

package 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&nbsp;&nbsp;&nbsp;&nbsp;-fx-background-insets:&nbsp;0&nbsp;0&nbsp;-1&nbsp;0,&nbsp;0,&nbsp;1,&nbsp;2;在这里阅读要删除 textArea 角中的黑点，您可以将屏幕包裹到 Pane 中：&nbsp; &nbsp; Pane blackPane = new Pane();&nbsp; &nbsp; blackPane.setId("blackPane");&nbsp; &nbsp; screen = new TextArea();&nbsp; &nbsp; screen.setId("screen");&nbsp; &nbsp; screen.setEditable(false);&nbsp; &nbsp; blackPane.getChildren().add(screen);&nbsp; &nbsp; gridPane.add(blackPane, 0, row, 4, 1);并添加 CSS 属性：&nbsp; &nbsp; #blackPane #screen {&nbsp; &nbsp; -fx-background-color: black;&nbsp; &nbsp; -fx-background-radius: 0;&nbsp; &nbsp; }再次阅读这里对我来说效果很好。以及未来的一些提示：不要将视图层与控制层混合，这会使您的代码变得一团糟。添加 .fxml 文件，您可以在其中创建视图。您可以使用Scene Builder以清晰的方式轻松构建视图。阅读并执行您的 IDE（推荐的 Intellij）的建议。你有很多重复和复杂的、错误的代码格式。例如：stackPane.setOnMousePressed(new EventHandler<MouseEvent>() {&nbsp; &nbsp; @Override&nbsp; &nbsp; public void handle(MouseEvent mouseEvent) {&nbsp; &nbsp; &nbsp; &nbsp; // record a delta distance for the drag and drop operation.&nbsp; &nbsp; &nbsp; &nbsp; dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();&nbsp; &nbsp; &nbsp; &nbsp; dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();&nbsp; &nbsp; }});可以用这个代替：stackPane.setOnMousePressed(mouseEvent -> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // record a delta distance for the drag and drop operation.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dragDelta.x = primaryStage.getX() - mouseEvent.getScreenX();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dragDelta.y = primaryStage.getY() - mouseEvent.getScreenY();&nbsp; &nbsp; &nbsp; &nbsp; });