[译]JavaFX 2.0+系列教程-使用内置的布局面板(5)-堆栈面板(StackPane)

堆栈面板 StackPane 将所有的节点放在一个堆栈中进行布局管理，后添加进去的节点会显示在前一个添加进去的节点之上。这个布局为将文本(Text)覆盖在一个图形(Shape)或者图像(Image)上提供了一个简单的方案，或者可以将普通的图形相互覆盖来创建更复杂的图形。

图 1-6 显示了一个帮助按钮，它是通过在一个渐变背景的方形上堆了一个问号标志来实现的。

图 1-6 简单的堆栈面板示例Sample Stack Pane

你可以在堆栈面板中设置对齐属性(Alignment)来控制子节点的位置，这个属性是对所有子节点生效的。你也可以通过设置外边距属性(Margin)来单独的控制单个子节点的位置。

代码片段 例 1-4 是上图中帮助按钮的实现代码

例1-4 创建堆栈面板

public void addStackPane(HBox hb) {
    StackPane stack = new StackPane();
    Rectangle helpIcon = new Rectangle(30.0, 25.0);
    helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,
        new Stop[]{
        new Stop(0,Color.web("#4977A3")),
        new Stop(0.5, Color.web("#B0C6DA")),
        new Stop(1,Color.web("#9CB6CF")),}));
    helpIcon.setStroke(Color.web("#D0E6FA"));
    helpIcon.setArcHeight(3.5);
    helpIcon.setArcWidth(3.5);

    Text helpText = new Text("?");
    helpText.setFont(Font.font("Verdana", FontWeight.BOLD, 18));
    helpText.setFill(Color.WHITE);
    helpText.setStroke(Color.web("#7080A0")); 

    stack.getChildren().addAll(helpIcon, helpText);
    stack.setAlignment(Pos.CENTER_RIGHT);     // 在堆栈面板中右对齐
    StackPane.setMargin(helpText, new Insets(0, 10, 0, 0)); // 设置问号标志例右边10像素以达到将问号标志居中的效果

    hb.getChildren().add(stack);            // 将StackPane添加到HBox中
    HBox.setHgrow(stack, Priority.ALWAYS);    // 将HBox水平多余的所有空间都给StackPane，这样前面设置的右对齐就能保证问号按钮在最右边
}

代码片段 例 1-4 的最后两行将创建的StackPane添加到 例 1-2 创建的HBox中，同时设置StackPane始终居于HBox的最右边。

运行代码，结果如 图 1-7 所示。

图 1-7 StackPane在HBox中的显示效果

[译]JavaFX 2.0+系列教程-使用内置的布局面板(5)-堆栈面板(StackPane)