java fx 按钮长度,如何制作一个3xp直径的圆形Javafx按钮？

小编典典

更新：在仔细查看结果按钮时，像在José答案中那样设置形状似乎在很小的按钮上比

-fx-background-radius在此答案中使用设置更好(在设置形状时，结果按钮看起来更圆一些)。因此，这里的解决方案可能最适合较大的按钮(例如10像素或更多)，而设置形状可能最适合3像素的极小按钮(尽管这是一个非常细微的差别)。

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

它。

您可以使用CSS进行制作。

通过将设置为较大的值来舍入-fx-background-radius。

屏幕截图是在视网膜Mac上拍摄的，因此它们的大小是

原始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;"

);

此处仅使用内联样式以使样本较小且自包含。在实际的应用程序中，您需要将样式放在样式表中。

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

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

因为JavaFX试图提供合理的默认值。如果没有

默认的最小尺寸，则当您将场景调整为

较小的大小时，某些按钮将消失，用户将无法

单击它们-这将是非常糟糕的用户体验。因此 ，即使在按钮上未设置任何文本，

最小大小也默认为大约1em，外加一些填充(例如，刚好大于一个

字符)。但是，它只是

Java系统的默认设置，因为它不能真正确切地知道您的应用程序

想要什么。如果默认设置不适用于您的情况，请覆盖它们或

提供其他提示，例如明确设置

控件的最小大小。

“ 5em”代表什么？

em：相关字体的“字体大小”

因此5em表示字体大小的5倍。默认JavaFX样式表中控件的大多数大小都是使用em单位指定的。这样，当您

更改字体或字体大小时，UI会优雅地缩放以适应更大或更小的字体。在这种特殊情况下，选择5em几乎是

任意的，我只是想要一个较大的值，以便按钮将完全圆形，否则-fx-background-radius将创建一个带有圆角的矩形，而不是一个完整的圆。通过确保传递给的半径尺寸-fx-background-radius大于控件大小的一半，控件将呈现圆形外观。

我知道这有些令人困惑且不直观。我只是从默认的JavaFX样式表中复制了该概念，其想法是，无论它多么令人困惑，它可能都是实现这些效果的最佳实践，否则就不会在默认样式表中使用。

我可以看到的这种方法的主要优点是不需要代码，所有样式都可以直接在CSS中完成(因此您可以更改外观

而无需修改Java代码)，并且如果需要，可以在其中指定坐标em单位，以便控件随字体大小缩放。因此，明显的疯狂背后有一些原因。

2020-09-26