如何制作直径为3xp的圆形的javafx按钮?
我想做一个非常小的圆形按钮,上面没有文字。这是我如何尝试的。
Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);
但是,有两个问题:
1.按钮的形状不是完美的圆形,而更像是椭圆形。
2.不生效。据我估计,它的直径超过3...
我怎样才能制作一个更小的圆形按钮?帮助赞赏。bt.setMaxSize(1.5,1.5);
我想做一个非常小的圆形按钮,上面没有文字。这是我如何尝试的。
Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);
但是,有两个问题:
1.按钮的形状不是完美的圆形,而更像是椭圆形。
2.不生效。据我估计,它的直径超过3...
我怎样才能制作一个更小的圆形按钮?帮助赞赏。bt.setMaxSize(1.5,1.5);
更新:在仔细查看生成的按钮时,像José的答案中那样设置形状似乎比设置此答案中使用的形状效果更好(当设置形状时,生成的按钮看起来更圆形)。因此,这里的解决方案可能最适合较大的按钮(例如10px或更大),而设置形状可能最适合3px的极小按钮(尽管这是一个非常微妙的差异)。-fx-background-radius
3px是一个非常小的按钮。我不确定你期望人们如何点击它。
你可以使用CSS来制作它。
这是一个30px大小的圆形按钮:
以及您请求的 3px 大小按钮:
舍入是通过将较大的值设置为 来实现的。-fx-background-radius
屏幕截图是在视网膜Mac上拍摄的,因此它们的大小是原始大小的两倍。
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Rounding extends Application {
@Override
public void start(Stage stage) throws Exception {
Button roundButton = new Button();
roundButton.setStyle(
"-fx-background-radius: 5em; " +
"-fx-min-width: 3px; " +
"-fx-min-height: 3px; " +
"-fx-max-width: 3px; " +
"-fx-max-height: 3px;"
);
StackPane layout = new StackPane(
roundButton
);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
请注意,按钮是使用背景层呈现的。内层是实际的按钮,外部有一个焦点环和轻微的发光。因此,它实际上可能略大于3px。如果要精确地获得3px,则需要摆脱焦点背景插图。如下所示:
roundButton.setStyle(
"-fx-background-radius: 5em; " +
"-fx-min-width: 3px; " +
"-fx-min-height: 3px; " +
"-fx-max-width: 3px; " +
"-fx-max-height: 3px; " +
"-fx-background-color: -fx-body-color;" +
"-fx-background-insets: 0px; " +
"-fx-padding: 0px;"
);
此处仅使用内联样式,以允许示例小且独立。在实际的应用程序中,您可以将样式放在样式表中。
使用 a 对按钮进行舍入的想法来自默认 JavaFX modena.css 样式表中舍入单选按钮的实现。您可以通过查看包含 JavaFX 代码和资源的 jfxrt.jar 文件来查找样式表。-fx-background-radius
相比之下,这是使用圆形形状解决方案创建的按钮的图像,如José的答案所示:
为什么仍然需要设置minSize().....
因为JavaFX试图提供合理的默认值。如果空按钮没有默认的最小大小,则当您将场景大小调整得更小时,某些按钮将消失,用户将无法单击它们 - 这将是一个非常糟糕的用户体验。因此,最小大小默认为约1em,加上一些填充(例如,仅大于字符),即使按钮上未设置任何文本。但是,它只是Java系统默认设置,因为它无法真正知道您的应用程序想要什么。当默认值不适用于您的情况时,请重写它们或提供其他提示,例如显式设置控件的最小大小。
“5em”代表什么?
请参阅 JavaFX 8 css 参考指南:
em:相关字体的“字体大小”
所以5em意味着字体大小的5倍。缺省 JavaFX 样式表中控件的大多数大小都是使用 em 单位指定的。这样,当您更改字体或字体大小时,UI 将正常缩放以容纳更大或更小的字体。在这种特殊情况下,5em的选择非常随意,我只是想要一个大值,以便按钮完全圆形,否则将创建一个圆角矩形,而不是一个完整的圆形。通过确保传递到的半径尺寸大于控件大小的一半,控件将呈现圆圆外观。-fx-background-radius
-fx-background-radius
我知道这有点令人困惑和非直觉。我只是从默认的JavaFX样式表中复制了这个概念,其想法是,无论它多么令人困惑,它都可能是实现这些效果的最佳实践,否则它不会在默认样式表中使用。
我可以看到这种方法的主要优点是不需要代码,所有样式都可以直接在CSS中完成(因此您可以在不修改Java代码的情况下更改外观),如果需要,您可以以em单位指定坐标,以便控件随字体大小而缩放。因此,这种明显的疯狂背后是有原因的。
您只需要设置最小值大小。这将可以:
double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);
它会给你一个圆形的,非常小的按钮。不确定是否要使其变小,但您也可以这样做。只需将半径更改为所需值即可。r