JavaFX TextField用等宽字体自动调整大小后文本不可见的解决方法

这个问题我之前折腾过，原因其实很简单：当你把prefColumnCount直接绑定到文本长度时，TextField的宽度刚好和文本的“理论列数”完全匹配，但等宽字体的实际渲染加上TextField默认的内边距、边框等，会导致文本被轻微裁剪——未选中时就看不到，选中时因为高亮背景的渲染逻辑，文本才会显示出来。

下面给你几个可行的解决方案：

方案1：给列数加个小偏移量（最简单） #

直接在绑定的时候给文本长度加1，让TextField多留出一列的宽度，足够容纳完整文本：

@FXML
public void initialize() {
    textField.setStyle("-fx-font-family: 'monospaced';");
    // 给文本长度加1，预留额外空间
    textField.prefColumnCountProperty().bind(textField.textProperty().length().add(1));
}

这个方法简单粗暴，对于大部分场景都管用，尤其是不需要极致精确宽度的时候。

方案2：调整TextField的内边距 #

有时候默认内边距太小，导致文本贴到边缘被裁剪，我们可以手动加大内边距：

@FXML
public void initialize() {
    textField.setStyle("-fx-font-family: 'monospaced'; -fx-padding: 3px 6px;");
    textField.prefColumnCountProperty().bind(textField.textProperty().length());
}

通过-fx-padding调整上下左右的内边距，让文本有足够的显示空间。

方案3：基于字体度量精确计算宽度（最精准） #

如果需要完全贴合文本宽度又不裁剪，可以用JavaFX的FontMetrics相关逻辑来计算文本的实际渲染宽度，然后直接绑定TextField的prefWidth：

import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.beans.binding.Bindings;

@FXML
public void initialize() {
    Font monoFont = Font.font("monospaced");
    textField.setFont(monoFont);
    
    // 用Text组件获取字体度量（实现简单且准确）
    Text textMeasurer = new Text();
    textMeasurer.setFont(monoFont);
    
    // 绑定prefWidth到文本实际宽度 + 内边距
    textField.prefWidthProperty().bind(Bindings.createDoubleBinding(() -> {
        String currentText = textField.getText();
        if (currentText.isEmpty()) {
            // 空文本时显示默认宽度，比如一个空格的宽度
            textMeasurer.setText(" ");
        } else {
            textMeasurer.setText(currentText);
        }
        // 加上左右内边距，避免文本贴边框
        return textMeasurer.getLayoutBounds().getWidth() 
                + textField.getPadding().getLeft() 
                + textField.getPadding().getRight();
    }, textField.textProperty()));
}

这个方法会精确计算每个字符的实际渲染宽度，再加上内边距，确保文本始终完整显示，同时TextField宽度刚好适配内容。

验证效果 #

修改后不管文本是否选中，都能正常显示：

• 未选中文本时：（原异常状态消失，文本完整可见）
• 选中文本后：（保持正常选中高亮效果）

你可以根据自己的需求选择其中一种方案，个人推荐方案1（简单高效）或方案3（精准适配）。

内容的提问来源于stack exchange，提问作者JohnyDoe