0

私のアイテムレンダラーは画像であり、選択したアイテムのハイライトが画像の下にあるため、ハイライトが表示されません。画像の「上」にハイライトを作成する方法はありますか？

ありがとう。

4

3 に答える 3

3

これはまさに、Flex の特定の単純に見えるものが実際にはどれほど複雑であるかを認識したポイントです。:)

このような問題を処理するには、目的の効果に応じてさまざまな方法がありますが、私が常に行ってきた方法は、最初に TileList の特定の関数をオーバーライドし、次にカスタム itemRenderers を使用することです。（ただし、レンダリングされたコンテンツの上にListのグラフィックスオブジェクトを描画する方法を理解することはできませんでした-他の誰かがそれに光を当てることができるかもしれません。）

たとえば、私は通常、TileList を拡張する新しいクラスを作成し、ハイライト インジケーターと選択インジケーターの描画を担当するメソッドをオーバーライドして、これらの関数がインジケーターを描画する方法をもう少し制御できるようにします (または、コメント アウトすることもあります)。何も描画されないように、それらのコンテンツは完全に含まれています):

public class MyCustomTileList extends TileList
{
    public function MyCustomTileList()
    {
        super();
    }

    override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
    {           
        var g:Graphics = Sprite(indicator).graphics;
            g.clear();
            g.beginFill(getStyle("myRolloverColor"), getStyle("myRolloverAlpha"));
            g.drawRect(1, 1, width - 1, height - 1);
            g.endFill();

            indicator.x = x;
            indicator.y = y;
    }

    override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
    {
        //
    }
}

しかし、あなたが言うように、グラフィック オブジェクトは常にリスト アイテムのコンテンツの背後に描画されるように見えるため、通常、アイテム レンダラーを使用して、データに関連付けられた画像の上に何か (たとえば、半透明のボックス) を描画することを選択します。アイテム：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            private function img_rollOver():void
            {
                highlight.visible = true;
            }

            private function img_rollOut():void
            {
                highlight.visible = false;
            }

        ]]>
    </mx:Script>

    <mx:Image id="img" source="{something}" horizontalCenter="0" verticalCenter="0" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" />
    <mx:Box id="highlight" alpha="0.1" color="#FFFFFF" horizontalCenter="0" verticalCenter="0" width="{img.width}" height="{img.height}" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" visible="false" />

</mx:Canvas>

他にもアプローチがあると思いますが、これは私にとっては非常にうまく機能し、通常、ストック Flex コントロールをサブクラス化することには他の利点もあります。

それが役に立てば幸い！

于 2009-05-13T17:45:44.977 に答える
1

画像を 2px でパディングして、境界線を使用することを考えましたか? 頭に浮かぶ別の選択肢は、絶対配置です...

于 2009-05-13T14:20:47.947 に答える
0

選択とハイライト効果をオフにしてから、レンダラーで期待どおりのものを作成する方が簡単だと思います。レンダラーのデータには、ある種の .selected プロパティが必要です。その後、レンダラーは data.selected (または同様のもの) をバインドまたは変更に応答し、必要に応じて外観を更新できます。

リストにあるデフォルトのビジュアルは、他に選択肢がない場合にのみ使用します。List をそれに拡張しようとは決して思いません (ただし、良いコードの Christian です)。

于 2009-05-14T01:56:23.503 に答える