在 FXML 中的 TextField 内制作按钮

Question

我在FXML 中创建了一个TextField。我想在这个TextField 中添加Button，比如清除按钮。我该如何实现？

Answer 1

您可以使用AnchorPane 来包装TextField 和Button，并将锚点设置为使TextField 填充整个AnchorPane，并将Button 锚定在右侧-一边。

示例：

<AnchorPane prefHeight="24.0" prefWidth="322.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
  <children>
    <TextField prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
    <Button graphicTextGap="0.0" minHeight="10.0" minWidth="13.0" mnemonicParsing="false" prefHeight="20.0" prefWidth="22.0" style="-fx-background-color: #7085FF;&#10;-fx-background-radius: 30;&#10;-fx-background-insets: 0;" text="x" textFill="WHITE" AnchorPane.bottomAnchor="4.0" AnchorPane.rightAnchor="4.0" AnchorPane.topAnchor="4.0">
      <font>
        <Font size="9.0" />
      </font>
    </Button>
  </children>
</AnchorPane>

输出如下：

如果您不止一次需要它（而且很可能您会），最好将它单独放在另一个 FXML 文件中，并带有相应的控制器类，该控制器类也处理 Button 的操作。

分离的 FXML 示例：

ButtonedTextField.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.*?>
<?import javafx.scene.text.Font?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="application.ButtonedTextField">
  <children>
    <TextField fx:id="textField" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
    <Button fx:id="button" graphicTextGap="0.0" minHeight="10.0" minWidth="13.0" mnemonicParsing="false" prefHeight="20.0" prefWidth="22.0" style="-fx-background-color: #7085FF;&#10;-fx-background-radius: 30;&#10;-fx-background-insets: 0;" text="x" textFill="WHITE" AnchorPane.bottomAnchor="4.0" AnchorPane.rightAnchor="4.0" AnchorPane.topAnchor="4.0">
      <font>
        <Font size="9.0" />
      </font>
    </Button>
  </children>
</AnchorPane>

ButtonedTextField.java（控制器）

public class ButtonedTextField implements Initializable {

    public @FXML TextField textField;
    private @FXML Button button;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        button.setOnAction(e -> textField.setText(""));
    }

}

然后您可以将此控件包含到另一个 FXML：

ButtonedTextFieldTest.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.*?>

<TabPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="application.ButtonedTextFieldTest">
  <tabs>
    <Tab text="Untitled Tab">
      <content>
        <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
          <children>
            <fx:include fx:id="buttonedTextField" source="ButtonedTextField.fxml" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="2.0" />
          </children>
        </AnchorPane>
      </content>
    </Tab>
  </tabs>
</TabPane>

ButtonedTextFieldTest.java（包含 FXML 的控制器）

public class ButtonedTextFieldTest implements Initializable {

    private @FXML AnchorPane buttonedTextField;
    private @FXML ButtonedTextField buttonedTextFieldController;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        buttonedTextFieldController.textField.textProperty().addListener((ov, oldVal, newVal) -> {
            System.out.println(newVal);
        });

    }
}

注意事项：

• 您可以随意自定义Button（也许设置图形更容易）
• 可以进一步自定义位置和样式。
• 正如您在上一课中看到的，控件本身及其控制器也可以被注入！约定注入控制器是在被感染控件的 ID 后使用“控制器”后缀。

Answer 2

我以前使用过ControlsFX 项目中的CustomTextField 类来实现这种功能。 ControlsFX 缺乏良好的文档，但 CustomTextField 类非常易于使用：

CustomTextField textfield = new CustomTextField
textfield.setRight(new Button());