如何使用JavaFX创建“bootstrap”样式警报

Question

我想创建一个窗格，向用户显示警报，其风格类似于显示的经典引导警报here（带有X关闭按钮的警报）。

到目前为止，我已经尝试过使用网格板并且它也不错。但是我对结果不太满意，特别是当我添加更多文字时。

<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

我会在TextFlow中使用Text嵌入式HBox子项。当然，在你的按钮上，你需要一个图形而不是一个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>