Почему кнопки изменяют размеры при клике - PullRequest
Новая
       11

Почему кнопки изменяют размеры при клике

0 голосов
/ 10 июля 2019

Я делаю простой калькулятор, и проблема с кнопками. Когда я нажимаю на них, они слегка сжимаются снизу, чего я не хочу делать. Кроме того, когда я нажимаю на textArea, белые точки исчезают, но когда я нажимаю на кнопки, точки вокруг textArea отображаются снова. Зачем? Как сделать их постоянно невидимыми?

Я попытался вставить css в .button: нажал код, который установит размер кнопки на нормальный размер, но он не работает. Они все равно уменьшаются.

Main.java 

package gui;

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

Calculator.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; }

style.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;
}

1 Ответ

0 голосов
/ 11 июля 2019

Чтобы удалить этот эффект кнопок, добавьте его к кнопке 

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

Читать здесь

Чтобы удалить черные точки в углах textArea, вы можете перенести экран на панель: 

    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();
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...