2

次のように検索テキストボックスを実装しようとしています。

ユーザーが入力を開始し、ゼロ以外の結果がある場合、テキスト ボックスが開き、その下に結果が表示されます。ユーザーが結果を選択すると、テキスト ボックスは閉じられますが、今度は下向き矢印 (コンボ ボックスのようなもの) が表示されるため、ユーザーはリストを再度開くことができます。

本当に必要なのは、下矢印を非表示/表示できるコンボボックスだと思います。Flex でこれを行うにはどうすればよいですか?

前もって感謝します。

4

3 に答える 3

3

これを行う簡単な方法を見つけました：

setStyle("arrowButtonWidth", 0);

カスタム コンボボックスで、矢印ボタンの初期幅を 0 に設定しました。

次に、リスト変更イベントで、

  addEventListener(ListEvent.CHANGE, changeHandler);

データプロバイダーのサイズが 1 より大きい場合、矢印の幅は (たとえば) 20 に戻されます

  setStyle("arrowButtonWidth", 20);

このアプローチは、上記のアプローチよりもはるかに単純です。私のアプローチの落とし穴を知っている場合は、共有してください。

于 2010-05-21T17:46:25.283 に答える
0

どちらの場合にも、styleNameを変更することでアクセスできるカスタムボタンスキンを提供することもできます。これは、user294702のソリューションよりも軽量になる可能性があります。

たとえば、ソースとシンボルにダミー名を使用すると、次のようになります。

.comboBoxWithArrow {
  up-skin: Embed(source="graphics.swf",symbol="comboArrowUp");
  down-skin: Embed(source="graphics.swf",symbol="comboArrowDown");
  over-skin: Embed(source="graphics.swf",symbol="comboArrowOver");
  disabled-skin: Embed(source="graphics.swf",symbol="comboArrowDisabled");
  /* and any other skin states you want to support */
}

.comboBoxWithoutArrow {
  up-skin: Embed(source="graphics.swf",symbol="comboNoArrowUp");
  down-skin: Embed(source="graphics.swf",symbol="comboNoArrowDown");
  over-skin: Embed(source="graphics.swf",symbol="comboNoArrowOver");
  disabled-skin: Embed(source="graphics.swf",symbol="comboNoArrowDisabled");
  /* and any other skin states you want to support */
}

条件に応じて、styleNameを矢印が表示されているものに設定します。それ以外の場合は、矢印が表示されていないものに設定します。

于 2010-03-29T12:48:50.630 に答える
0

2つの状態を持つ両方のコンポーネント（textinputとcombo）を使用して単純なカスタムキャンバスを作成するのはどうですか。テキスト入力を一方の状態で表示し、コンボをもう一方の状態で表示しますか？

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:states>
        <mx:State name="combo">
            <mx:RemoveChild target="{textinput1}"/>
            <mx:AddChild position="lastChild">
                <mx:ComboBox x="48" y="10"></mx:ComboBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:TextInput x="48" y="10" id="textinput1"/>
    <mx:Label x="10" y="12" text="Text"/>

</mx:Canvas>
于 2010-03-29T10:08:34.240 に答える