删除 JavaFX 按钮填充？

Posted 2023-02-26

【中文标题】删除 JavaFX 按钮填充？

【英文标题】：Remove JavaFX button padding?

【发布时间】：2015-02-04 23:28:32

【问题描述】：

我正在构建一个看起来非常简单的计算器，但我不知道这些按钮周围的填充是从哪里来的。以下是我构建流程窗格的方式：

private FlowPane addFlowPaneRightSide() 

    FlowPane flow = new FlowPane();
    //flow.setPadding(new Insets(0, 0, 0, 0));
    flow.setVgap(0);
    flow.setHgap(0);
    flow.setPrefWrapLength(WIDTH_OF_CENTER / 3); // width of function buttons
    flow.setStyle("-fx-background-color: 978c87;");

    // setup arrays to hold the buttons and images for the right column
    Button operatorButtons[] = new Button[NUM_OP_BUTTONS];
    ImageView operatorImages[] = new ImageView[NUM_OP_BUTTONS];

    for (int i=0; i < NUM_OP_BUTTONS; i++) 
        operatorImages[i] = new ImageView(
                new Image(Calculator.class.getResourceAsStream(
                "images/orange-"+(i)+".png")));
        operatorButtons[i] = new Button();
        operatorButtons[i].setGraphic(operatorImages[i]);
        operatorButtons[i].setId("orange-"+(i));
        flow.getChildren().add(operatorButtons[i]);
    

    return flow;

当我只是将图像放在流窗格中时，它工作得很好，但是当我开始在循环中创建按钮时，它给了我这个：

我的 CSS：

/* 
    Document   : stylesheet.css
    for Calculator project in JavaFX
*/

.root
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";


.button
    -fx-text-fill: #006464;
    -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
    /*-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;*/
    -fx-background-color: transparent;
    -fx-background-insets: 0 0 0 0, 0, 0, 0;
    -fx-background-radius: 0 0 0 0, 0, 0, 0;
    -fx-border-width: 0 0 0 0, 0, 0, 0;


.button:focused 
    -fx-color: -fx-focused-base;
    /*-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;*/
    -fx-background-color: transparent;
    -fx-background-insets: 0 0 0 0, 0, 0, 0;
    -fx-background-radius: 0 0 0 0, 0, 0, 0;
    -fx-border-width: 0 0 0 0, 0, 0, 0;

最后是整个程序：

package calculator;


import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text; 

/**
 *
 * @author Jim Lohse
 */
public class Calculator extends Application 

    public final int CALC_WIDTH = 500;
    public final int CALC_HEIGHT = 642;
    public final int NUM_BUTTONS = 15;
    public final int NUM_OP_BUTTONS = 5;
    public final int WIDTH_OF_CENTER = 354;

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) 
        launch(args);
    

        @Override
    public void start(Stage stage) 

// Use a border pane as the root for scene
        BorderPane border = new BorderPane();

        HBox hbox = addHBox();
        border.setTop(hbox);

        border.setRight(addFlowPaneRightSide());

        border.setCenter(addFlowPaneCenter());

        Scene scene = new Scene(border, CALC_WIDTH, CALC_HEIGHT);
        scene.getStylesheets().add("calculator/stylesheet.css");
        stage.setScene(scene);
        stage.setTitle("Calculator");
        stage.setResizable(false);
        stage.show();
    

/*
 * Creates an HBox with two buttons for the top region
 */

    private HBox addHBox() 

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: #336699;");

        Button buttonCurrent = new Button("Current");
        buttonCurrent.setPrefSize(100, 20);

        Button buttonProjected = new Button("Projected");
        buttonProjected.setPrefSize(100, 20);

        hbox.getChildren().addAll(buttonCurrent, buttonProjected);

        return hbox;
    

/*
 * Creates a horizontal flow pane with the orange operations buttons
 */
    private FlowPane addFlowPaneRightSide() 

        FlowPane flow = new FlowPane();
        //flow.setPadding(new Insets(0, 0, 0, 0));
        flow.setVgap(0);
        flow.setHgap(0);
        flow.setPrefWrapLength(WIDTH_OF_CENTER / 3); // width of function buttons

        // setup arrays to hold the buttons and images for the right column
        Button operatorButtons[] = new Button[NUM_OP_BUTTONS];
        ImageView operatorImages[] = new ImageView[NUM_OP_BUTTONS];

        for (int i=0; i < NUM_OP_BUTTONS; i++) 
            operatorImages[i] = new ImageView(
                    new Image(Calculator.class.getResourceAsStream(
                    "images/orange-"+(i)+".png")));
            operatorButtons[i] = new Button();
            operatorButtons[i].setGraphic(operatorImages[i]);
            operatorButtons[i].setId("orange-"+(i));
            flow.getChildren().add(operatorButtons[i]);
        

        return flow;
    

    /*
 * Creates a horizontal flow pane with the orange operations buttons
 */
    private FlowPane addFlowPaneCenter() 

        FlowPane flow = new FlowPane();
        //flow.setPadding(new Insets(0, 0, 0, 0));
        flow.setVgap(0);
        flow.setHgap(0);
        flow.setPrefWrapLength(WIDTH_OF_CENTER); // width of function buttons

        Button centerButtons[] = new Button[NUM_BUTTONS];
        ImageView centerImages[] = new ImageView[NUM_BUTTONS];
        for (int i=0; i < NUM_BUTTONS; i++) 
            centerImages[i] = new ImageView(
                    new Image(Calculator.class.getResourceAsStream(
                    "images/button-"+(i)+".png")));
            centerButtons[i] = new Button();
            centerButtons[i].setGraphic(centerImages[i]);
            centerButtons[i].setId("button-"+(i));
            flow.getChildren().add(centerButtons[i]);
        

        return flow;
    

【问题讨论】：

哦，在发帖时，我已经更改了 CALC_WIDTH = 475 并且没有区别，这是按钮的宽度，所以不是这样。

今晚还没有人，去睡觉了。对于它的价值，计算器的大小应该是固定的，所以我不担心调整它的大小或这个项目的按钮。感谢您的任何建议！

【参考方案1】：

我没有您正在使用的图片的副本，所以我看不出它应该是什么样子。但我会尝试使用正方形的图片。

这让我明白了：

现在，根据您的描述，按钮之间没有实际的填充。我认为您可能会说标签区域本身存在一些填充，这会给您带来问题。这很容易解决。

我解决此问题的方法是在制作每个按钮时添加一行代码 (blah[i].setPadding(Insets.EMPTY))。

for (int i=0; i < NUM_OP_BUTTONS; i++) 
    operatorImages[i] = new ImageView(
            new Image(Java.class.getResourceAsStream(
                    "art" + File.separator + "Square.png")));
    operatorButtons[i] = new Button();
    operatorButtons[i].setGraphic(operatorImages[i]);
    operatorButtons[i].setPadding(Insets.EMPTY);
    operatorButtons[i].setId("orange-"+(i));
    flow.getChildren().add(operatorButtons[i]);

和

for (int i=0; i < NUM_BUTTONS; i++) 
    centerImages[i] = new ImageView(
            new Image(Java.class.getResourceAsStream(
                    "art" + File.separator + "Square.png")));
    centerButtons[i] = new Button();
    centerButtons[i].setGraphic(centerImages[i]);
    centerButtons[i].setPadding(Insets.EMPTY);
    centerButtons[i].setId("button-"+(i));
    flow.getChildren().add(centerButtons[i]);

这应该可以解决你的小问题。

编辑：只是想提一下，您看到的一点点空白是图像本身的一部分，而不是填充。

【讨论】：

谢谢，我的帖子中有这个链接：i.imgur.com/91fHMOc.jpg 并且填充在下部，有趣的是它在你的版本中没有出现。让我再看看，一会儿再回来。

你太棒了，谢谢！！！！！！添加带有 .setPadding(Insets.EMPTY) 的行就可以了！