如何防止圆形结合依赖

Question

我试图创建具有自身内部的图像部分文本框，类似于this。

imageView.fitHeightProperty().bind(Bindings.createDoubleBinding(
    () -> textField.getHeight() - 
      textField.getPadding().getTop() - 
      textField.getPadding().getBottom(), 
    textField.heightProperty(), textField.paddingProperty())); 

imageView.fitWidthProperty().bind(imageView.fitHeightProperty()); 

textField.paddingProperty().bind(Bindings.createObjectBinding(
    () -> new Insets(textField.getPadding().getTop(), 
        textField.getPadding().getRight(), 
        textField.getPadding().getBottom(), 
        textField.getPadding().getRight() * 2 + imageView.getFitWidth()), 
    imageView.fitWidthProperty(), textField.paddingProperty())); 

我目前的做法是使用StackPane举行TextField，然后还加了ImageView为StackPane的孩子。该ImageView需要知道如何调整自己，所以我已绑定了fitHeight到TextField的高度，在考虑TextField的的填充。

ImageView的fitWidth然后绑定到它自己的fitHeight。

最后，我需要让我的TextField的文本向右偏移（因为图像阻止它），所以我再次做了另一个绑定取决于ImageView的fitWidth。

这与循环依赖，这导致堆栈溢出结束。有没有其他的方法可以不用硬编码TextField的左边填充？

Answer 1

这里是一个小为例，我使用（StackPane/TextField/ImageView），但不是我的形象劝你与SVG绘制自己的形状有它的完全控制（MouseHover /聚焦...），我以前也使用CSS来实现这一目标：

的Java：

private StackPane sp = new StackPane(); 
    private TextField tf = new TextField(); 
    private ImageView iv; 

    //Init StackPane 
    sp.getStylesheets().add(getClass().getResource("style.css").toExternalForm()); 
    sp.getStyleClass().add("identifiant"); 
    sp.setPrefSize(200, 40); 
    sp.setLayoutX(100); 
    sp.setLayoutY(100); 

    //Init ImageView 
    iv = new ImageView(getClass().getResource("Img.png").toString()); 
    StackPane.setAlignment(iv, Pos.CENTER_LEFT); 
    StackPane.setMargin(iv, new Insets(0, 0, 0, 10)); 

    //Init TextField 
    StackPane.setAlignment(tf, Pos.CENTER_LEFT); 
    StackPane.setMargin(tf, new Insets(2, 5, 0, 30)); 

    //Add all content 
    sp.getChildren().addAll(iv,tf); 

的CSS：

.identifiant{ 

-fx-background-color:#45444a; 
-fx-effect:innershadow(three-pass-box , rgba(0,0,0) , 6, 0.0 , 0 , 0); 
-fx-background-radius:8px; 
} 

.text-field{ 

-fx-background-insets:0; 
-fx-background-color:#45444a; 
-fx-text-fill:white; 
} 

希望这将帮助你！