java - 在 FXML 中的 TextField 内制作按钮

Question

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

Answer 1

您可以使用 AnchorPane 来包装 TextField 和 Button 并将 anchor 设置为具有 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 文件中，并使用相应的 Controller 类来处理 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( Controller )

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的 Controller )

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(也许设置图形更容易)
• 可以进一步自定义位置和样式。
• 正如你在最后一个类中看到的，控件本身及其 Controller 也可以被注入(inject)!按照惯例，注入(inject) Controller 是在被感染控件的 ID 后使用“Controller”后缀。