如何在动作脚本的容器框中居中文本

Question

我试图将文本 (RichEditableText) 在容器内居中。到目前为止，我的代码看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:Box id="myCustomBox" height="100%" width="100%" initialize="init();">


    <fx:Script>

        <![CDATA[

            import mx.containers.Box;
            import mx.containers.HBox;
            import mx.containers.VBox;
            import mx.controls.Button;
            import mx.controls.Image;

            import spark.components.RichEditableText;

            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TextFlow;
            import flashx.textLayout.formats.TextAlign;

            [Embed("dialog_error.png")] 
            private var myImage:Class; 


            public function init():void {
                var img:Image = new Image();
                img.source = myImage;

                this.addElement(buildPane("Something went wrong", img));

            }

            private function buildPane(message:String, image:Image):Box{
                var exPane:HBox = new HBox();
                exPane.percentHeight = 100;
                exPane.percentWidth = 100;
                exPane.setStyle("horizontalGap","0");

                //Image hosting pane
                var imPane:VBox = new VBox;
                imPane.setStyle("backgroundColor","blue");
                imPane.percentHeight = 100;
                imPane.explicitWidth = 50;
                image.minHeight = 16;
                image.minWidth = 16;
                imPane.setStyle("paddingLeft",10);
                imPane.setStyle("paddingRight",10);
                var invisBtn1:Button = new Button();
                invisBtn1.percentHeight = 40;
                invisBtn1.visible = false;
                imPane.addChild(invisBtn1);
                image.percentHeight = 20;
                imPane.addChild(image);
                var invisBtn2:Button = new Button();
                invisBtn2.visible = false;
                invisBtn2.percentHeight = 40;
                imPane.addChild(invisBtn2);
                exPane.addChild(imPane);

                //Text hosting pane
                var txtPane:Box = new Box();
                txtPane.setStyle("backgroundColor","yellow");
                txtPane.percentHeight = 100;
                //txtPane.setStyle("paddingBottom",10);
                txtPane.setStyle("paddingLeft",0);
                //txtPane.setStyle("paddingTop",30);
                txtPane.setStyle("paddingRight",5);
                //Specify text alignment
                var errMsgLabel:RichEditableText = new RichEditableText;
                var textFlow:TextFlow = new TextFlow();
                var pCenter:ParagraphElement = new ParagraphElement();
                var spanCenter:SpanElement = new SpanElement();
                spanCenter.text = message;
                pCenter.addChild(spanCenter);
                pCenter.textAlign = TextAlign.CENTER;
                textFlow.addChild(pCenter);
                errMsgLabel.textFlow = textFlow;
                errMsgLabel.percentHeight = 100;
                errMsgLabel.percentWidth = 100;
                errMsgLabel.multiline = true;
                txtPane.addChild(errMsgLabel);
                exPane.addChild(txtPane);

                return exPane;

            }

        ]]>
    </fx:Script>

</mx:Box>
</s:WindowedApplication>

我希望文本与 dialog_error 图标（通常的 X 标记图标）处于同一级别。因此，如果文本较高，则图标需要在文本中间居中。任何指针都会有所帮助。

谢谢。

Answer 1

我想不出你为什么要用 ActionScript 而不是 MXML 编写所有这些的充分理由。你只是让自己变得更难。

您问题中的全部 100 行代码可以简化为：

<s:HGroup width="100%" gap="0">
    <s:VGroup width="50" height="100%" paddingLeft="10" paddingRight="10" 
              verticalAlign="middle">
        <s:Image id="msgIcon" source="@Embed('dialog_error.png')"/>
        <s:Button visible="false" includeInLayout="false"/>
        <s:Button visible="false" includeInLayout="false"/>
    </s:VGroup>
    <s:RichEditableText id="errMsgLabel" width="100%"/>
</s:HGroup>

此代码还包含必要的修复，以使错误图标相对于错误消息的文本高度水平居中。

• 移除了 HGroup 的 100% 高度；这会导致图像在整个容器的中间居中，而不仅仅是文本高度。
• 将verticalAlign="middle"添加到包含图像和按钮的VGroup；此属性会将此容器的内容与其垂直中心对齐。
• 将includeInLayout="false"添加到不可见按钮；如果你只是让按钮不可见，它们仍然会占用布局中的空间，将图像向上推一点；将此属性设置为 false 将告诉 VGroup 容器表现得好像 Button 真的不在那里进行布局。
• 移除了 RichEditableText 上的 100% 高度，使其仅与其文本内容一样高，否则图标仍将居中于整个容器的中间。
• 删除了一堆冗余容器。

请注意，我假设您仅出于测试目的应用背景颜色，以查看容器的布局方式。

---

我了解您想要动态更改图标。您可以通过之后以编程方式设置其source 属性来轻松实现此目的：

msgIcon.source = otherEmbeddedImage;

甚至更好，通过数据绑定：

<s:Image source="{msgIcon}"/>

msgIcon = otherEmbeddedImage;