0

あいまいなタイトルで申し訳ありません。短い言葉でそれを表現するより良い方法は思いつきませんでした。

基本的に、カスタム ItemRenderer (IR) を作成しています。IR には、左側にラベル、右側にアイコンがあります。右側のアイコンは動的です (追加アイコンまたは削除アイコンの場合もあれば、何もない場合もあります)。これは美しく機能し、必要な制御を提供してくれます。

さて、問題は、モバイル アプリケーションでリストをスクロールすると、アイコンが変わることです。

どのように見えるか: ここに画像の説明を入力

Test3 をドラッグして指 (またはエミュレーターではマウス) を使用してスクロールした後の外観: ここに画像の説明を入力

ご覧のとおり、アイコンは変わりますが、ラベルは変わりません。dragEnabledSpark List コンポーネントで、、、dropEnabledおよびすべてがdragMoveEnabledfalse に設定されています。アイコンの選択が実行されるのは on だけcreationCompleteなので、ある時点で別のアイコンを選択する方法はありません。この変更が発生した後、データ自体が本来あるべき状態であることも確認できます。

アイテムを作成する MXML は次のとおりです。

<s:HGroup width="100%" verticalAlign="middle" left="{this.sideSpacing}" right="{this.sideSpacing}" top="{this.sideSpacing}" bottom="{this.sideSpacing}">
    <s:Label id="text" width="100%"/>

    <s:Image id="actionIcon" buttonMode="true" click="actionIconClick( event );">
        <s:filters>
            <s:DropShadowFilter alpha=".45" angle="90" distance="3" blurX="3" blurY="3" quality="3"/>
        </s:filters>
    </s:Image>
</s:HGroup>

<s:Rect width="100%" height="1" bottom="0" alpha=".1">
    <s:fill>
        <s:SolidColor color="#000000"/>
    </s:fill>
</s:Rect>

そして、どのアイコンを表示するかを選択するための、おそらく過度に精巧な AS3:

private function creationComplete( e:Event ):void {
    if ( this.data.actionIcon != null ) {
        this.actionIconType = this.data.actionIcon;
        if ( this.data.actionIcon == ACTION_ICON_ADD ) {
            this.actionIcon.source = this.addBitmapSource;
        }
        else if ( this.data.actionIcon == ACTION_ICON_REMOVE ) {
            this.actionIcon.source = this.removeBitmapSource;
        }
        else {
            this.actionIcon.source = null;
            this.actionIcon.visible = false;
            this.actionIcon.includeInLayout = false;
        }
    }
    else {
        this.actionIcon.source = null;
        this.actionIcon.visible = false;
        this.actionIcon.includeInLayout = false;
    }
}

この問題の原因は何ですか?

4

1 に答える 1

3

基本的に、dataChange イベントが発生したときにレンダラーのラベルとアイコンを更新する必要があります。CreationComplete は一度だけ起動されます。itemRenderers のデータが変更されるだけで、リストは実際にはスクロールされません。物事がスクロールしているように見えます。私はこれをレンダラーのリサイクルと呼んでいます。

これは、あなたが望むことをするモバイルアプリ用に私が作成したコンポーネントです。ラベルとアイコン (別名デコレーター) を表示します。スクロールすると、ラベルとアイコンの両方が更新されます。非常によく似たアプローチを使用できます。

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    dataChange="onDataChange(event)" alpha=".7" width="100%" cacheAsBitmap="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import com.dotcomit.magondaMaze.managers.BoardDataManager;
            import com.dotcomit.magondaMaze.managers.StatManager;

            import mx.events.FlexEvent;

            [Embed(source="assets/images/chooseLevel/completed78x78.png")]
            private var completedImage:Class;                               

            public var statManager :StatManager = StatManager.instance;     


            protected function onDataChange(event:FlexEvent):void
            {
                var itemAsXML :XML = data as XML;
                var results :String = itemAsXML.@id + '. ' + itemAsXML.@title;
                label = results;
                if( statManager.isBoardComplete(itemAsXML.@id)){
                    this.decorator = completedImage;
                } else {
                    this.decorator = null;
                }
            }
        ]]>
    </fx:Script>
</s:IconItemRenderer>

また、IconItemRenderer コンポーネント (上記のコードを拡張したもの) は、必要なことを正確に行うように設計されていることも付け加えておきます。したがって、いわばホイールを書き直す必要はないかもしれません。

于 2013-01-04T22:21:06.383 に答える