Question

我已经配置了一个JavaFX按钮来在使用CSS伪类（按钮：按下）按下时改变颜色。但是，当按钮改变颜色时，按钮顶部和按钮边框之间仍然可以看到旧颜色的小间隙。此图像说明了问题 - 按下的按钮和上方按钮边框之间有一些浅灰色的滑动problem

我该如何解决这个问题？

编辑：当我更改每个按钮的边框宽度时，问题会更明显。每个按钮周围都有间隙，当按钮具有焦点（最后按下）时，下边框间隙将被填充 - 在此图片中，数字为8. problem

package calculator;

import java.util.ArrayList;
import java.util.List;
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 Calculator extends Application {

    private static int appWidth = 230*3;
    private static int appHeight = 300*3;
    private static int numRows = 7;
    private static int numCols = 8;
    List<Button> buttonList = new ArrayList();

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

    @Override
    public void start(Stage primaryStage) throws Exception {
//Create 0-9 buttons 
        for (int i = 0; i < 10; i++) {
            Button tempButton = new Button(Integer.toString(i));
            tempButton.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
            HBox.setHgrow(tempButton, Priority.ALWAYS);
            VBox.setVgrow(tempButton, Priority.ALWAYS);
            buttonList.add(tempButton);
        }

//Point button 
        //point button 
        Button point = new Button(".");
        point.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Plus, plys, minus, multiply, and divide buttons 
        Button equals = new Button("=");
        equals.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        equals.getStyleClass().add("button-special");

        Button plus = new Button("+");
        plus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        plus.getStyleClass().add("button-special");

        Button minus = new Button("-");
        minus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        minus.getStyleClass().add("button-special");

        Button multiply = new Button("x");
        multiply.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        multiply.getStyleClass().add("button-special");

        Button divide = new Button("/");
        divide.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        divide.getStyleClass().add("button-special");

//Clear and delete buttons 
        Button clear = new Button("C");
        clear.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        Button del = new Button("Del");
        del.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Screen s 
        Label screen = new Label("0");
        screen.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        screen.setAlignment(Pos.CENTER_RIGHT);

//Create GridPane 
        GridPane grid = new GridPane();
        grid.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Add nodes to grid pane 
        grid.add(buttonList.get(0), 0, 6, 4, 1);
        grid.add(point, 4, 6, 2, 1);

        grid.add(buttonList.get(1), 0, 5, 2, 1);
        grid.add(buttonList.get(2), 2, 5, 2, 1);
        grid.add(buttonList.get(3), 4, 5, 2, 1);

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

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

        grid.add(equals, 6, 6, 2, 1);
        grid.add(plus, 6, 5, 2, 1);
        grid.add(minus, 6, 4, 2, 1);
        grid.add(multiply, 6, 3, 2, 1);
        grid.add(divide, 6, 2, 2, 1);

        grid.add(clear, 0, 2, 3, 1);
        grid.add(del, 3, 2, 3, 1);

//Set row and column constraints 
        for (int rowIndex = 0; rowIndex < Calculator.numRows; rowIndex++) {
            RowConstraints rc = new RowConstraints();
            rc.setVgrow(Priority.ALWAYS);
            rc.setFillHeight(true);
            rc.setPercentHeight(Calculator.appHeight / Calculator.numRows);
            grid.getRowConstraints().add(rc);
        }

        for (int colIndex = 0; colIndex < Calculator.numCols; colIndex++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setHgrow(Priority.ALWAYS);
            cc.setFillWidth(true);
            cc.setPercentWidth(Calculator.appWidth / Calculator.numCols);
            grid.getColumnConstraints().add(cc);
        }

// Create the scene and the stage 
        Scene scene = new Scene(grid, appWidth, appHeight);
        scene.getStylesheets().add("Simple.css");

        primaryStage.setScene(scene);
        //primaryStage.setTitle("Calculator");
        primaryStage.setResizable(false);
        primaryStage.show();

    }

}

这是CSS：

.root
{
    -fx-font-size: 15pt;

}

.button
{
    -fx-background-radius: 0;
    -fx-border-style: solid;
    -fx-border-color: gray;
    -fx-border-width: .3;
    -fx-background-color: #E0E0E0;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

}

.button:pressed
{
    -fx-background-color: #B2B2B2;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

}

.button-special
{
    -fx-background-color: #EA9747;
    -fx-text-fill: white;
    -fx-font-size: 17pt;

}

.button-special:pressed
{
    -fx-background-color: #bb8738;
    -fx-text-fill: #555555;
    -fx-border-color: gray;

}

.button-top
{

}

Answer 1

我找到了答案。我必须添加特定的背景和边框样式：

-fx-border-width: 0 1 1 0;
-fx-background-insets: 0,1,1;
-fx-background-radius: 0;

JavaFX按钮周围有令人讨厌的空白

1 个答案: