如何制作直径为3xp的圆形javafx按钮？

Question

我想制作一个非常小的圆形按钮,上面没有文字.这是我尝试的方式.

Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);

然而,有两个问题:
1.按钮的形状不是完美的圆形,而是更像椭圆形.
2. bt.setMaxSize(1.5,1.5);不生效.我估计,它的直径超过3 ......
我怎么能做一个更小的圆形按钮？帮助感谢.

Answer 1

更新:对所得按钮的密切审查,设置像何塞的答案形状似乎在非常小的按钮不是设置更好的工作-fx-background-radius在这个答案中,(所产生的按钮看起来更圆一点,当形状设置).因此,这里的解决方案可能最适合较大的按钮(例如10px或更多),而设置形状可能最适合3px的极小按钮(尽管这是一个相当微妙的差异).

3px是一个非常小的按钮.我不确定你希望人们如何点击它.

你可以使用CSS制作它.

这是一个30px大小的圆形按钮:

并且您要求的3px尺寸按钮:

通过设置较大的值来实现舍入-fx-background-radius.

截图是在视网膜上拍摄的,因此它们的尺寸是原始尺寸的两倍.

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 -fx-background-radius来循环按钮的想法来自默认JavaFX modena.css样式表中圆角单选按钮的实现.您可以通过查看包含JavaFX代码和资源的jfxrt.jar文件找到样式表.

相比之下,这是使用圆形解决方案创建的按钮的图像,如José的答案:

为什么还需要设置minSize().....

因为JavaFX正在尝试提供合理的默认值.如果空按钮没有默认的最小大小,当你将场景调整得更小时,一些按钮就会消失,用户将无法点击它们 - 这将是一个非常糟糕的用户体验.所以最小大小默认为大约1em,加上一些填充(例如,只是大于一个字符),即使按钮上没有设置文本.但是,它只是Java系统的默认设置,因为它无法确切地知道您的应用程序想要什么.如果默认值不适合您的情况,请覆盖它们或提供其他提示,例如显式设置控件的最小大小.

"5em"代表什么？

请参阅JavaFX 8 css参考指南:

em:相关字体的'font-size'

所以5em意味着字体大小的5倍.默认JavaFX样式表中控件的大多数大小都是使用em单位指定的.这样,当您更改字体或字体大小时,UI会正常缩放以适应更大或更小的字体.在这种特殊情况下,5em的选择非常随意,我只想要一个大值,这样按钮就会完全呈圆形,否则-fx-background-radius就会产生一个带圆角的矩形,而不是一个完整的圆形.通过确保传递到的半径尺寸-fx-background-radius大于控件尺寸的一半,控件呈现圆形外观.

我知道这有点令人困惑和不直观.我只是从默认的JavaFX样式表中复制了这个概念,其理念是,无论它有多么混乱,它可能是实现这些效果的最佳实践,或者它不会在默认样式表中使用.

主要的好处,我可以看到这样的方法是,没有代码是必需的,所有的造型可以用CSS来直接完成(所以你可以改变,而无需修改Java代码的样子),如果你愿意,你可以在指定坐标em单位,以便控件与您的字体大小一致.因此明显的疯狂背后有一些原因.

Answer 2

您只需要设置最小尺寸.这样做:

double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);

它会给你一个圆形的非常小的按钮.不确定是否要缩小它,但你也可以这样做.只需将半径更改为r所需的值即可.