如何使用JavaFX創建“引導”樣式的警報

Question

我想創建一個窗格，該窗格將向用戶顯示警報，這些用戶的樣式類似於此處顯示的經典引導警報（帶有X dismiss按鈕的警報）。

到目前為止，我已經嘗試使用網格窗格並且它還不錯。 但是我對結果並不滿意，尤其是當我添加更多文本時。

<GridPane minHeight="40" maxHeight = "40">
    <VBox fx:id="MessageVbox" alignment="BASELINE_LEFT" GridPane.columnIndex="0" GridPane.rowIndex="0">
        <Label fx:id="Message" text="Alert Message" />
        <padding>
            <Insets bottom="5.0" left="10.0" right="10.0" top="10.0" />
        </padding>
    </VBox>
    <Button fx:id="Dismiss" alignment="TOP_RIGHT" onAction="#handleDismiss" text="X" GridPane.columnIndex="1" GridPane.rowIndex="0" />

    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
            percentWidth="90.0" prefWidth="100.0" />
        <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES"
            minWidth="10.0" percentWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
</GridPane>

Answer 1

我會在HBox使用TextFlow和嵌入式Text子級。 當然，在按鈕上，您需要圖形而不是X字符。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.text.TextFlow?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="120.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox prefHeight="400.0" prefWidth="600.0" style="-fx-border-color: red; -fx-background-color: pink; -fx-border-radius: 6;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <TextFlow prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
               <children>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-fill: red;" text="Alert messages will appear here...">
                     <font>
                        <Font name="Microsoft YaHei UI" size="14.0" />
                     </font>
                  </Text>
               </children>
               <padding>
                  <Insets bottom="12.0" left="12.0" right="12.0" top="12.0" />
               </padding>
            </TextFlow>
            <VBox>
               <children>
                  <Button mnemonicParsing="false" style="-fx-background-color: transparent;" text="X" />
               </children>
            </VBox>
         </children>
         <padding>
            <Insets bottom="12.0" left="12.0" right="12.0" top="12.0" />
         </padding>
      </HBox>
   </children>
</AnchorPane>