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

我无法从这个问题中做任何事情，所以我的猜测来自你的例子就是你不希望在图像/文本中切断选择。

首先：填充没有占用空间是一个矛盾。

您必须以不同方式处理此问题：您更改FlowPane的属性。您可以轻松删除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

这样的事情。它为您提供了节点周围的空间，同时保持了整体布局的空间。我没有你真正想要达到的信息。因此，如果某些像素不是您想要的像素，则必须使用插入值。

填充在背景中

1 个答案: