关于带有小图标的TextField

Question

我想用图标编写TextField组件。 所以行为如下：

• 如果TextField包含空字符串，我使用＆＃34; lens.png＆＃34;。
• 否则，我使用＆＃34; cross.png＆＃34;。

使用JavaFX Scene Builder，我在堆栈窗格中添加了TextFiled和ImageView。 我的代码如下：

    @FXML
    private TextField textSearch;
    @FXML
    private ImageView imageView;
    final Image lensIcon = new Image("/issue/images/lens.png");
    final Image crossIcon = new Image("/issue/images/cross.png");

    //initialize () method 
     textSearch.textProperty().addListener(obs -> {
            final String text = textSearch.getText();
            Image icon = (text==null || text.isEmpty()) ? lensIcon : crossIcon;
            imageView.setImage(icon);
            imageView.setMouseTransparent(icon == lensIcon);
        }
        );
        imageView.setOnMouseClicked(evt -> textSearch.setText(null));

我的问题如下： 如何防止在图标（ImageView）下面写字符。下图说明了我的问题。

Answer 1

ControlsFX是一个JavaFX API，它提供了大量高级控件UI，而这些UI没有开箱即用的JavaFX。

ControlsFX - http://fxexperience.com/controlsfx/

FontAwesomeFX提供了数百个图标（例如您上面的cross）

FontAwesomeFX - https://bitbucket.org/Jerady/fontawesomefx/downloads/

以下是导入这两个梦幻般的API后问题的演示解决方案

public class TextFields_Demo extends Application {

    private Parent createContent() {
        Pane root = new Pane();
        CustomTextField customTextField = new CustomTextField();
        FontAwesomeIconView icon = new FontAwesomeIconView(FontAwesomeIcon.CLOSE);
        customTextField.setRight(icon);
        root.getChildren().add(customTextField);
        return root;
    }

    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(createContent());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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