Wie verhindert man die zirkuläre Bindungsabhängigkeit?

Question

Ich versuche ein Textfeld zu erstellen, das ein Bildteil in sich hat, ähnlich wie 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())); 

Mein aktueller Ansatz ist es, eine StackPane verwenden die TextField zu halten, dann auch eine ImageView als die StackPane ‚s Kind hinzufügen. Die ImageView muss wissen, wie die Größe selbst, so habe ich seine fitHeight an die TextField Höhe, unter Berücksichtigung der TextField 's Polsterung gebunden.

Die ImageView 's fitWidth ist dann an eine eigene fitHeight gebunden.

Schließlich muss ich meine TextField machen ‚auf der rechten Seite s Textversatz (weil das Bild, um es blockiert), so habe ich wieder eine andere, dass die Bindung ist abhängig von der ImageView‘ s fitWidth.

Dies führt zu einer zyklischen Abhängigkeit, die dazu führt, dass der Stapel überläuft. Gibt es eine andere Möglichkeit, dies zu tun, ohne die linke Polsterung TextField hart zu codieren?

Answer 1

Hier ist ein kleines Beispiel, ich habe verwendet (StackPane/TextField/ImageView) aber anstelle des Bildes rate ich Ihnen, Ihre eigene Form mit SVG zu zeichnen, um die volle Kontrolle über sie zu haben (MouseHover/Focused ...), ich ' ve verwendet auch eine CSS, dies zu erreichen:

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; 
} 

Hoffnung das wird Ihnen helfen!