如何在JavaFX中设置CSS指定的-fx-graphic尺寸?
解决JavaFX按钮图标(-fx-graphic)尺寸调整问题
嘿,我来帮你搞定这个图标尺寸的困扰!你之前用的-fx-max-height和-fx-max-width其实是作用在按钮本身的,不是按钮内部的图标组件,所以才没效果。下面给你两种靠谱的解决方案:
方案1:纯CSS控制图标尺寸
直接通过CSS选择器定位到按钮内部的.graphic元素,设置它的宽高就可以了,还能可选保持图标比例:
.delete-button { -fx-graphic: url(../view/Close.png); /* 可选:调整按钮的内边距,让图标显示更协调 */ -fx-padding: 8px; } /* 定位到按钮内的图标组件 */ .delete-button .graphic { -fx-min-width: 20px; -fx-max-width: 20px; -fx-min-height: 20px; -fx-max-height: 20px; /* 可选:保持图标的宽高比例,避免拉伸变形 */ -fx-preserve-ratio: true; }
方案2:Java代码中创建ImageView并设置尺寸
这种方式更灵活,适合需要动态调整图标的场景,直接把图标包装成ImageView再设置给按钮:
// 加载图片并创建ImageView ImageView closeIcon = new ImageView(new Image(getClass().getResourceAsStream("../view/Close.png"))); // 设置图标尺寸 closeIcon.setFitWidth(20); closeIcon.setFitHeight(20); // 可选:保持图标比例 closeIcon.setPreserveRatio(true); // 创建按钮并设置图标 Button deleteButton = new Button(); deleteButton.setGraphic(closeIcon); deleteButton.getStyleClass().add("delete-button");
如果之后还要用CSS调整,也可以给ImageView添加样式类,再用CSS控制它的属性。
额外小提示
如果图标还是显示异常,检查下这两点:
- 图片本身的原始尺寸是不是过大?可以先压缩图片,再配合上面的方法调整
- 按钮的默认内边距是不是太宽?用
-fx-padding调整按钮的内边距,让图标和按钮边界更协调
内容的提问来源于stack exchange,提问作者Andy
相关产品推荐
相关产品推荐

