后台填充

Question

我创建了这个小示例代码来展示我面临的问题：

package test.barimages;

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class MainApp extends Application
{
    ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();

    @Override
    public void start(Stage stage) throws Exception
    {
        selectedText.addListener((obs, oldSelectedText, newSelectedText) ->
        {
            if (oldSelectedText != null)
            {
                oldSelectedText.setStyle("");
            }
            if (newSelectedText != null)
            {
                newSelectedText.setStyle("-fx-background-color: lightgray; -fx-padding: 5;");
            }
        });

        FlowPane navigationBar = new FlowPane();
        navigationBar.setMaxHeight(45);
        navigationBar.setPadding(new Insets(5, 5, 5, 5));
        navigationBar.setVgap(10);   // Set vertical gap size
        navigationBar.setHgap(10);

        Label FirstIcon = FirstIcon();
        Label SecIcon = SecIcon();
        Label ThurIcon = ThurIcon();

        selectedText.set(FirstIcon);

        navigationBar.getChildren().addAll(FirstIcon, SecIcon, ThurIcon);

        Scene scene = new Scene(navigationBar);

        stage.setTitle("JavaFX and Maven");
        stage.setScene(scene);
        stage.show();
    }

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

    private Label FirstIcon()
    {
        Image image = new Image("http://goo.gl/kYEQl");
        ImageView imageView = new ImageView();
        imageView.setImage(image);

        Label label = new Label("First");
        label.setFont(Font.font("Verdana", 12));
        label.setContentDisplay(ContentDisplay.LEFT);

        label.setGraphicTextGap(8);

        imageView.setFitWidth(40);
        imageView.setFitHeight(40);
        imageView.setPreserveRatio(true);
        imageView.setSmooth(true);
        imageView.setCache(true);

        label.setGraphic(imageView);

        label.setOnMouseClicked((event) ->
        {
            selectedText.set(label);
        });

        return label;
    }

    private Label SecIcon()
    {
        Image image = new Image("http://goo.gl/kYEQl");
        ImageView imageView = new ImageView();
        imageView.setImage(image);

        Label label = new Label("Second");
        label.setFont(Font.font("Verdana", 12));
        label.setContentDisplay(ContentDisplay.LEFT);

        label.setGraphicTextGap(8);

        imageView.setFitWidth(40);
        imageView.setFitHeight(40);
        imageView.setPreserveRatio(true);
        imageView.setSmooth(true);
        imageView.setCache(true);

        label.setGraphic(imageView);

        label.setOnMouseClicked((event) ->
        {
            selectedText.set(label);
        });

        return label;
    }

    private Label ThurIcon()
    {
        Image image = new Image("http://goo.gl/kYEQl");
        ImageView imageView = new ImageView();
        imageView.setImage(image);

        Label label = new Label("Thurd");
        label.setFont(Font.font("Verdana", 12));
        label.setContentDisplay(ContentDisplay.LEFT);

        label.setGraphicTextGap(8);

        imageView.setFitWidth(40);
        imageView.setFitHeight(40);
        imageView.setPreserveRatio(true);
        imageView.setSmooth(true);
        imageView.setCache(true);

        label.setGraphic(imageView);

        label.setOnMouseClicked((event) ->
        {
            selectedText.set(label);
        });

        return label;
    }
}

当您运行代码并单击图像时，您会看到所选标签会推送下一个。这是由填充引起的。有没有什么方法可以在不推近图的情况下保留添加的背景？

Answer 1

我无法从这个问题中得出任何结论，所以我从你的例子中猜测是你不希望选择在 image/text.

第一：有padding而不占space是矛盾的

您必须以不同的方式处理此事：更改 FlowPane 的属性。您可以轻松删除流程窗格的 hgap/vgap，而是向每个可点击节点添加填充。

示例更改：

selectedText.addListener((obs, oldSelectedText, newSelectedText) ->
{
    if (newSelectedText != null)
    {
        newSelectedText.setStyle("-fx-background-color: lightgray");

    }
});

FlowPane navigationBar = new FlowPane();
navigationBar.setMaxHeight(45);
navigationBar.setPadding(new Insets(5, 5, 5, 5));
navigationBar.setVgap(10);   
navigationBar.setHgap(0); // set to 0, instead add padding to every node

Label FirstIcon = FirstIcon();
FirstIcon.setPadding(new Insets( 5)); // add padding
Label SecIcon = SecIcon();
SecIcon.setPadding(new Insets( 5)); // add padding
Label ThurIcon = ThurIcon();
ThurIcon.setPadding(new Insets( 5)); // add padding

类似的东西。它为您提供围绕节点的 space，同时保持整体布局的 space 与您拥有的方式相同。我不知道你真正想要实现的目标。因此，如果某些像素不是您想要的方式，您必须使用插入值。

后台填充

Padding in background

javafx

javafx-8