JavaFX TabPane标签显示模糊问题求助

问题说明 #

使用JavaFX的TabPane开发标签页应用，每个标签页包含ScrollPane和FXML加载的节点，但标签页内容出现显示模糊的情况。此前通过禁用缓存解决过TextArea的模糊问题，但该方法对当前场景无效。

可复现代码 #

HelloApplication.java #

package com.example.demo;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
import java.io.IOException;
 
public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("demo.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch();
    }
}

Demo.java #

package com.example.demo;
 
import javafx.collections.FXCollections;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
 
import java.io.IOException;
import java.util.List;
 
public class Demo {
    @FXML
    public ProgressBar progress;
    @FXML
    public AnchorPane menu;
    @FXML
    public ImageView head;
    @FXML
    public TabPane tab;
 
    private final List<Tab> tabs;
 
    public Demo(){
        tabs = FXCollections.observableArrayList();
    }
 
 
    @FXML
    public void initialize(){
        addTab();
    }
 
    private ScrollPane getScroll(){
        var pane = new ScrollPane();
        pane.setFitToWidth(true);
        return pane;
    }
 
    public void addTab(){
        var t = new Tab();
        t.setText("test");
 
        try{
            var loader = new FXMLLoader(getClass().getResource("/com/example/demo/demo2.fxml"));
            var scroll = getScroll();
            Node node = loader.load();
            scroll.setContent(node);
            t.setContent(scroll);
        } catch (IOException ignored) {
 
        }
 
        tabs.add(t);
        tab.getTabs().add(t);
    }
 
}

demo.fxml #

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
 
<AnchorPane
            xmlns:fx="http://javafx.com/fxml"
             fx:controller="com.example.demo.Demo"
            prefHeight="700.0" prefWidth="900.0" styleClass="main" stylesheets="@demo.css">
 
    <TabPane fx:id="tab" AnchorPane.topAnchor="10" AnchorPane.leftAnchor="10" AnchorPane.rightAnchor="10" AnchorPane.bottomAnchor="80" maxHeight="Infinity" maxWidth="Infinity"/>
</AnchorPane>

demo2.fxml #

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
 
<AnchorPane
            prefHeight="400.0" prefWidth="600.0">
    <Label text="Lorem ipsum dolor sit amet"/>
</AnchorPane>

demo.css #

.main{
    -fx-background-color: #202020;
}
 
*{
    -fx-cache: false;
}

解决方案 #

1. 针对TabPane与ScrollPane禁用缓存及硬件加速 #

修改demo.css，添加TabPane和ScrollPane专属的缓存禁用规则，增强容器层面的渲染控制：

.main{
    -fx-background-color: #202020;
}
 
.tab-pane, .scroll-pane {
    -fx-cache: false;
    -fx-cache-hint: DEFAULT;
    -fx-background-cache: false;
    -fx-hardware-accelerated: false;
}

2. 在代码中显式设置ScrollPane缓存属性 #

修改getScroll()方法，直接在代码层面禁用ScrollPane的缓存：

private ScrollPane getScroll(){
    var pane = new ScrollPane();
    pane.setFitToWidth(true);
    pane.setCache(false);
    pane.setCacheHint(CacheHint.DEFAULT);
    return pane;
}

3. 确保节点布局坐标为整数 #

模糊问题常因节点布局在非整数坐标导致，在加载FXML节点后强制对齐整数坐标：

public void addTab(){
    var t = new Tab();
    t.setText("test");
 
    try{
        var loader = new FXMLLoader(getClass().getResource("/com/example/demo/demo2.fxml"));
        var scroll = getScroll();
        Node node = loader.load();
        // 强制坐标为整数，避免半像素渲染模糊
        node.setLayoutX(Math.round(node.getLayoutX()));
        node.setLayoutY(Math.round(node.getLayoutY()));
        scroll.setContent(node);
        t.setContent(scroll);
    } catch (IOException ignored) {
 
    }
 
    tabs.add(t);
    tab.getTabs().add(t);
}

4. 调整JavaFX渲染模式 #

如果以上方法无效，添加VM参数切换到软件渲染模式，规避硬件加速带来的渲染兼容性问题：

-Dprism.order=sw

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