如何使用JavaFX创建一个类似于iPhone菜单上的通知标记的通知气泡？

Question

我是JavaFX的新手,我正在尝试创建类似于下图的通知徽章.

它将被用作通知计数,我希望将它放在JavaFX按钮的角落.我的问题是我找不到支持它的原生解决方案.有人可以推荐一种方法吗？

谢谢

Answer 1

像这样的东西？也许不那么漂亮(我不是艺术家),但我认为它可能涵盖了解决方案.

<?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>