移动设备上的 Flex TextArea 和 TextInput 未正确定位 [英] Flex TextArea and TextInput on mobile not positioning correctly

问题描述

在移动组件上使用 TextArea 和 TextInput 时遇到了两个问题，我不知道如何解决.第一个是 TextArea 文本位置不正确，第二个是它与其他组件重叠.

I've had two issues when working with TextArea and TextInput on mobile components I don't know how to solve. The first is that the TextArea text does not position correctly and the second is that it overlaps other components.

当 TextArea 位于 Scroller(或软键盘激活并移动 TextArea 位置)时会出现问题.

The issues occur when the TextArea is in a Scroller (or the soft keyboard activates and moves the TextArea position).

如果您将以下代码添加到移动应用程序中，您会看到这一点:

You can see this if you add the code below to a mobile Application:

<s:Scroller width="100%" height="100%" top="100" bottom="100">
    <s:VGroup width="50%">
        <s:Button label="" height="600" width="440"/>
        <s:TextArea id="testing" />
        <s:TextArea id="testing2" />
        <s:Button label="" height="800" width="440"/>
    </s:VGroup>
</s:Scroller>

第一张图片是带有一些文字的应用程序.

The first image is the application with some text.

在第二张图片中，我向下滚动了一些.当我向下滚动时，请注意文本保留在同一个位置(它位于其上方的按钮顶部)！

In the second image I've scrolled down some. As I've scrolled down notice that the text has remained in the same place (it's on top of the button that was above it)!

警告:
如果我抛出视图，则文本会立即定位在正确的位置(在 AIR 模拟器上)，并在内容固定到其最终位置时再次正确定位(在移动设备上，文本似乎消失直到它的最终静止位置).这是个好消息，因为投掷时发生了一些手动按下、拖动和释放(不投掷)或软键盘激活时不会发生的事情.

CAVEAT:
If I throw the view then the text is immediately positioned in the correct place (on the AIR Simulator) and is positioned again correctly when the content settles into it's final position (on mobile devices the text seems to disappear until it's final resting place). This is good news since something is happening on throw that is not happening when manually pressing, dragging and releasing (not throwing) or on soft keyboard activating.

不幸的是，文本可能仍会出现在所有其他内容之上，而忽略了滚动条掩码，但如果其他第一个问题得到解决，我可以接受.

Unfortunately, the text may still appears on top of all other content ignoring the scrollers mask but I can live with that if the other first problem is fixed.

更新
如果我将宽度设置为宽度 + 1，我可以让文本重新定位在正确的位置.这不会起作用，因为我不想明显地调整它的大小.我尝试无效，但没有任何效果.这是我在 softKeyboardActivating 事件中尝试的代码.取消注释 width = width+1 以查看它工作":

UPDATE
I can get the text to reposition in the right position if I set the width to a width + 1. This is not going to work because I don't want to resize it obviously. I tried invalidating and nothing is working. Here is the code I tried in the softKeyboardActivating event. Uncomment out the width = width+1 to see it "work" :

    <s:TextArea id="testing" softKeyboardActivate="testing_softKeyboardActivateHandler(event)"/>

<fx:Script>
    <![CDATA[
        import mx.core.IInvalidating;
        protected function testing_softKeyboardActivateHandler(event:SoftKeyboardEvent):void {
            trace("Activating");
            /*testing.invalidateProperties();
            testing.invalidateDisplayList();
            testing.invalidateSize();
            testing.validateNow();
            parentGroup.validateNow();
            scroller.validateNow();*/
            // testing.invalidateParentSizeAndDisplayList();
            //IInvalidating(testing.parent).invalidateSize();
            //IInvalidating(testing.parent).invalidateDisplayList();
            //testing.width = NaN;
            //testing.width = testing.width+1;
        }
    ]]>
</fx:Script>

更新 2:
这段代码有效，但它是一个黑客，它比抛出视图时滚动条使用的代码慢得多:

UPDATE 2:
This code works but it's a hack and it's much slower than the code that the scroller is using when the view is thrown:

protected function testing_softKeyboardActivateHandler(event:SoftKeyboardEvent):void {
    StageTextAreaSkin2(testing.skin).styleChanged("styleName");
}

更新 3
我在下面的答案部分添加了一个解决方法，但它是一个黑客.此外，当它处于正确位置时，它也会被正确屏蔽.所以这也很好.但是，我仍在寻找正确的方法来做到这一点.

UPDATE 3
I've added a workaround in the answers section below but it is a hack. Also, when it's in the right position it also is correctly masked. So that's good as well. However, I'm still looking for the right way to do this.

已在 AIR 模拟器、iPhone 5 和 Android Nexus 7 上的 Mac 上使用 Flex 4.6、AIR 3.5 进行测试.

This has been tested with Flex 4.6, AIR 3.5 on Mac on the AIR Simulator, iPhone 5 and Android Nexus 7.

推荐答案

这里有一个解决方法.创建一个 MXML 文件(通常 StageTextArea.mxml 即可)并将此代码放入其中.

Here is a workaround. Create an MXML file (usually StageTextArea.mxml will do) and place this code in it.

<?xml version="1.0" encoding="utf-8"?>
<s:TextArea xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            softKeyboardActivate="softKeyboardActivateHandler(event)"
            softKeyboardDeactivate="softKeyboardDeactivateHandler(event)"
            added="addedHandler(event)" 
            removed="removedHandler(event)">

    <!-- USAGE 
        <controls:StageTextArea id="myTextArea" parentScroller="{myScroller}"/>
    -->

    <fx:Script>
        <![CDATA[
            import mx.events.PropertyChangeEvent;

            import spark.components.Scroller;

            private var _parentScroller:Scroller;

            public function get parentScroller():Scroller {
                return _parentScroller;
            }

            /**
             * Adds a listener to an ancestor scroller. 
             * */
            [Bindable]
            public function set parentScroller(value:Scroller):void {

                if (value && value.viewport) {
                    value.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle, false, 0, true);
                }
                if (value==null && _parentScroller) {
                    value.viewport.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle);
                }
                _parentScroller = value;
            }


            /**
             * Add listener to parent component when added to the display list
             * */
            protected function addedHandler(event:Event):void {
                if (event.target==event.currentTarget) { 
                    // we could "discover" the scroller here if we wanted
                    // or we could just use parentScroller property
                    owner.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle, false, 0, true);
                }
            }

            /**
             * Remove listener to parent component when removed to the display list
             * */
            protected function removedHandler(event:Event):void {
                if (event.target==event.currentTarget) {
                    owner.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle);
                }
            }

            /**
             * Handle parent or ancestor scroll position changes
             */
            private function handle(e:PropertyChangeEvent):void {
                if (e.source == e.target && e.property == "verticalScrollPosition") {
                    //trace(e.property, "changed to", e.newValue);
                    updateTextFieldPosition();
                }
                if (e.source == e.target && e.property == "horizontalScrollPosition") {
                    //trace(e.property, "changed to", e.newValue);
                    updateTextFieldPosition();
                }
            }

            /**
             * Handles when keyboard activates
             * */
            protected function softKeyboardActivateHandler(event:SoftKeyboardEvent):void {
                updateTextFieldPosition();
            }

            /**
             * Handles when keyboard deactivates
             * */
            protected function softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void {
                updateTextFieldPosition();
            }

            /**
             * Updates the native text fields position
             * */
            public function updateTextFieldPosition():void {
                skin.styleChanged("anything"); // force skin class to revalidate
            }

        ]]>
    </fx:Script>

</s:TextArea>

这篇关于移动设备上的 Flex TextArea 和 TextInput 未正确定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！