我是JavaFX新手，我正在尝试创建一个类似于下图的通知徽章。
它将被用作通知计数，我希望将其放置在JavaFX按钮的角上。我的问题是我找不到支持此功能的本地解决方案。有人能推荐一种方法吗？谢谢
gv8xihay1#
像这样的东西？也许不是那么漂亮（我不是一个艺术家），但我认为它可能涵盖了解决方案。
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.paint.*?> <?import javafx.scene.shape.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${button.prefHeight}" prefWidth="${button.prefWidth}" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button fx:id="button" layoutY="8.0" mnemonicParsing="false" text="Click " AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> <StackPane layoutX="57.0" layoutY="-13.0" AnchorPane.rightAnchor="-10" AnchorPane.topAnchor="-10"> <children> <Circle radius="10.0" stroke="BLACK" strokeType="INSIDE"> <fill> <RadialGradient centerX="0.5" centerY="0.5" radius="0.8164556962025317"> <stops> <Stop color="#ff361beb" /> <Stop color="WHITE" offset="1.0" /> </stops> </RadialGradient> </fill> </Circle> <Label text="5" /> </children> </StackPane> </children> </AnchorPane>
tzdcorbm2#
我找到了一个更简单的解决方案（使用椭圆代替圆，以更好的方式显示两位数），只需在fxml文件中的按钮后添加一个椭圆和标签，如下所示：
<Button fx:id="btnAddMarking" layoutX="640.0" layoutY="60.0" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#stopRecording" prefHeight="48.0" prefWidth="205.0" styleClass="button-remark" text="Add marking" visible="false" /> <Ellipse fx:id="elMarking" fill="#ffaa00" layoutX="841.0" layoutY="63.0" radiusX="16.0" radiusY="12.0" stroke="#ffaa00" strokeType="INSIDE" visible="false" /> <Label fx:id="lblMarking" alignment="CENTER" layoutX="829.0" layoutY="51.0" prefHeight="25.0" prefWidth="25.0" styleClass="label-white" text="42" visible="false" />
这个技巧我已经用过好几次了：JavaFX只是按照元素在fxml文件中出现的顺序在屏幕上绘制元素，所以你总是可以得到一个元素在另一个元素之上（场景构建器也能正确地显示它）。嗯，至少在JavaFX17中是这样，因为这是我目前正在使用的。
2条答案
按热度按时间gv8xihay1#
像这样的东西？也许不是那么漂亮（我不是一个艺术家），但我认为它可能涵盖了解决方案。
tzdcorbm2#
我找到了一个更简单的解决方案（使用椭圆代替圆，以更好的方式显示两位数），只需在fxml文件中的按钮后添加一个椭圆和标签，如下所示：
这个技巧我已经用过好几次了：JavaFX只是按照元素在fxml文件中出现的顺序在屏幕上绘制元素，所以你总是可以得到一个元素在另一个元素之上（场景构建器也能正确地显示它）。
嗯，至少在JavaFX17中是这样，因为这是我目前正在使用的。