循環バインディングの依存関係を防ぐ方法

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の子としてImageViewを追加し、TextFieldを保持するためにStackPaneを使用することです。 ImageViewはサイズ変更の仕方を知る必要があるので、TextFieldのパディングを考慮して、そのfitHeightをTextFieldの高さにバインドしました。

ImageViewのfitWidthは、それ自身のfitHeightにバインドされています。

最後には、私は私のTextFieldようにする必要があり '（画像がそれをブロックしているため）のテキストが右にオフセットので、私は再び別のはそれがImageViewに依存している結合なかったのfitWidth。

これは、循環依存関係に終わり、スタックがオーバーフローする原因になります。 TextFieldの左パディングをハードコーディングせずにそれを行う他の方法はありますか？

Answer 1

私は（StackPane/TextField/ImageView）を使用しましたが、画像の代わりにSVGであなた自身の形を描いて（MouseHover/Focused ...）また、これを達成するために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; 
} 

が、これはあなたを助けることを願っています！