在FXML中的TextField中创建Button

Question

我在TextField中制作了FXML。我想在此Button清除按钮中添加TextField。我该如何实现呢？

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的动作。 / p>

分离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（可能更容易设置图形）
• 可以进一步定制展示位置和样式。
• 正如您在上一课中所看到的，控件本身及其控制器也可以注入！惯例是让注入的控制器使用＆＃34;控制器＆＃34;在inected控件的ID之后的postfix。

Answer 2

之前我曾使用ControlsFX项目中的CustomTextField类来实现此类功能。 ControlsFX缺乏良好的文档，但CustomTextField类很容易使用：

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