IntelliJ中如何将SceneBuilder移至IDE右侧实现与FXML代码同屏显示

侧固定SceneBuilder操作步骤 #

默认打开FXML文件时，Text代码编辑和Scene Builder预览是同标签组的两个分页，按以下操作即可实现左右分栏：

• 鼠标左键长按编辑器顶部的Scene Builder标签
• 按住标签直接向IDE右侧边缘拖动，直到界面出现蓝色的右侧分栏吸附提示后松开鼠标
• 调整两个面板的宽度比例到合适大小即可，此时修改左侧FXML代码，右侧SceneBuilder预览会自动同步更新

如果后续需要恢复成标签页模式，只需要长按右侧SceneBuilder面板的顶部标题栏，拖回原编辑器标签组区域即可。

替代预览工具 #

如果觉得官方SceneBuilder加载速度慢，也可以使用IntelliJ内置的轻量FXML预览功能：

• 打开FXML文件后，按快捷键Ctrl+Shift+A（Mac系统为Cmd+Shift+A）调出全局动作搜索框
• 输入FXML Preview并回车即可唤起预览面板，该面板同样支持拖动到右侧固定
• 注意：内置预览对复杂自定义控件、CSS样式的渲染兼容性弱于官方SceneBuilder，简单布局场景下可以优先使用。

异常情况排查 #

如果出现Scene Builder标签无法拖动吸附的情况，先检查两项配置：

• 确认IntelliJ版本为2020.3及以上，更早版本对SceneBuilder面板的分栏吸附支持存在缺陷
• 进入设置 -> 语言和框架 -> JavaFX路径，确认已经正确配置了本地SceneBuilder的安装路径

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