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

更新：仔细查看结果按钮，在José的答案中设置形状似乎在非常小的按钮上比在此答案中设置的-fx-background-radius设置得更好，（当设置形状时，结果按钮看起来更圆。所以这里的解决方案可能最适合较大的按钮（例如10px或更多），而设置形状可能最适合3px的极小按钮（尽管这是一个非常细微的差别）。

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

您可以使用CSS制作它。

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

30px

您要求的3px尺寸按钮：

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，你需要摆脱焦点背景插图。如下所示：

really small no focus

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;"
);

此处仅使用内联样式以允许样本小且独立。在实际应用程序中，您可以将样式放在样式表中。

使用-fx-background-radius来围绕按钮的想法来自默认JavaFX modena.css样式表中圆角单选按钮的实现。您可以通过查看包含JavaFX代码和资源的jfxrt.jar文件找到样式表。

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

circle button

为什么还需要设置minSize（）.....

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

“5em”代表什么？

请参阅JavaFX 8 css reference guide：

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

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

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

我可以看到这种方法的主要优点是不需要代码，所有样式都可以直接在CSS中完成（因此您可以在不修改Java代码的情况下更改外观），如果需要，可以指定co以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更改为所需的值。

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

2 个答案: