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％高度;这导致Image在整个容器的中间居中，而不仅仅是文本高度。
将verticalAlign="middle"添加到包含图像和按钮的VGroup;此属性将此容器的内容与其垂直中心对齐。
将includeInLayout="false"添加到隐形按钮中;如果你只是让按钮不可见，它们仍会占用布局空间，将图像向上推一点;将此属性设置为false将告诉VGroup容器表现为Buttons确实没有进行布局。
删除了RichEditableText上的100％高度，使其仅与文本内容一样高，否则图标仍将居中于整个容器的中间位置。
删除了一堆冗余容器。

请注意，我假设您仅为测试目的应用了背景颜色，以了解容器的布局方式。

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

msgIcon.source = otherEmbeddedImage;

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

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

msgIcon = otherEmbeddedImage;

如何在actionscript中的容器框中居中文本

1 个答案: