JavaFX TextArea多次内容样式修改后文本显示异常的解决咨询

I’ve run into similar rendering sync issues with JavaFX TextArea when dynamically updating content and styles, especially with fixed dimensions. Let’s break down the root cause and solutions for your scenario:

Root Cause #

The problem stems from incomplete layout recalculation after modifying TextArea properties (text, font, colors). When you fix the min/max dimensions, the component doesn’t automatically trigger a full redraw or layout update, leading to misaligned text or glitches. The behavior differs between JavaFX 8 and 13 due to internal layout engine changes.

Solutions #

1. Force Layout & Style Refresh #

After every property change, explicitly tell the TextArea to recalculate its layout and apply styles. Add these two lines at the end of your OnClickButton method:

textarea.requestLayout();
textarea.applyCss();

This ensures the component updates its internal layout (including the .content region and text alignment) immediately after your modifications, instead of waiting for a deferred UI refresh.

2. Clean Up Style Management #

Mixing setStyle() and CSS classes can cause conflicts. Instead of directly setting inline styles, define additional CSS classes to handle color switches:

.text-area-centered *.text { -fx-text-alignment: center; }
.text-area-centered .scroll-pane { -fx-hbar-policy: NEVER; -fx-vbar-policy: NEVER; }
.text-area-white-text { -fx-text-inner-color: white; }
.text-area-black-text { -fx-text-inner-color: black; }

Then update your button click handler to use class additions/removals instead of setStyle():

// Replace clickNo == 2 and 3 blocks with:
else if(clickNo == 2) {
    Region region = (Region) textarea.lookup(".content");
    region.setBackground(new Background(blackBGF));
    textarea.getStyleClass().remove("text-area-black-text");
    textarea.getStyleClass().add("text-area-white-text");
} else if(clickNo == 3) {
    Region region = (Region) textarea.lookup(".content");
    region.setBackground(new Background(whiteBGF));
    textarea.getStyleClass().remove("text-area-white-text");
    textarea.getStyleClass().add("text-area-black-text");
}

This avoids style overrides that might confuse the layout engine.

3. JavaFX 13 Specific Fix #

The offset issue in JavaFX 13 is likely due to changes in how the .content region’s padding is calculated. Add explicit padding to the .content region in your CSS to ensure text stays centered:

.text-area-centered .content {
    -fx-padding: 0; /* Adjust this value if needed to fine-tune alignment */
}

Combined with the layout refresh calls above, this should resolve the persistent offset.

Modified Code Snippet #

Here’s your updated OnClickButton method with the fixes applied:

private void OnClickButton(ActionEvent event) {
    if(clickNo == 1) {
        textarea.setText("7");
        textarea.setFont(new Font("Courier New Bold",24));
    } else if(clickNo == 2) {
        Region region = (Region) textarea.lookup(".content");
        region.setBackground(new Background(blackBGF));
        textarea.getStyleClass().remove("text-area-black-text");
        textarea.getStyleClass().add("text-area-white-text");
    } else if(clickNo == 3) {
        Region region = (Region) textarea.lookup(".content");
        region.setBackground(new Background(whiteBGF));
        textarea.getStyleClass().remove("text-area-white-text");
        textarea.getStyleClass().add("text-area-black-text");
    } else if(clickNo == 4) {
        textarea.setText("1 2 3\n4 5 6\n7 8 9");
        textarea.setFont(new Font("Courier New",10));
    }
    clickNo++;
    // Force layout and style refresh
    textarea.requestLayout();
    textarea.applyCss();
}

Testing Results #

• JavaFX 8: Adding requestLayout() and applyCss() should resolve the glitch that appeared after 4 clicks. Clicking the TextArea won’t be needed to restore correct rendering anymore.
• JavaFX 13: With the explicit .content padding and layout refresh, the text should stay centered without persistent offset, matching the initial launch position.

Notes #

• Ensure lookup(".content") is called after the TextArea is displayed (which it is, since this is in a button click handler post-stage show).
• Avoid frequent style changes directly via setStyle() as it can cause unnecessary layout invalidations; prefer CSS classes for better maintainability.

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