15

FB4を使用して、開いているスパークのDropDownListの高さを変更したいと思います。デフォルトでは、スクロールする前に最大6つのアイテムが表示されます。ドロップダウンリストに7つのアイテムが含まれているので、開いているドロップダウンリストの高さを、スクロールせずに7つのアイテムすべてに合うように変更したいと思います。回避策として、アイテムのフォントサイズを変更して、アイテムが小さくなり、7つすべてが収まるようにしましたが、小さいフォントは見栄えがよくありません。この高さを変更する方法はありますか？私はFlashにかなり慣れていないので、それが複雑な解決策である場合は、詳細に説明してください:-)。

4

5 に答える 5

18

verticalLayoutのrequestedRowCountプロパティを使用すると簡単ではありませんか？

<s:DropDownList dataProvider="{myDataProvider}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="10"/>
    </s:layout>
</s:DropDownList>
于 2011-08-17T09:08:39.077 に答える
16

問題は、Flex 4で、DropDownListSkinmaxHeight="134"がおそらく使用しているデフォルトのスキンに対して定義されていることです。これにより、オブジェクトがその高さを超えて伸びると、スクロールバーが強制的に表示されます。DropDownListSkinコードをコピーしてカスタムスキンに貼り付け、CSSを介してDropDownListに適用するだけです。

VariableHeightDropDownListSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled=".5"> 

    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
        popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

        <!-- removed maxHeight! -->
        <s:Group id="dropDown" minHeight="22">
            <!-- border/fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x5380D0" />
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>

            <s:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
            </s:filters>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />
    <s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:Skin>

サンプルアプリケーション

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    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:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList
        {
            skinClass: ClassReference("VariableHeightDropDownListSkin");
        }
    </fx:Style>

        <s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout requestedRowCount="7"/>
            </s:layout>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object name="one"/>
                    <fx:Object name="two"/>
                    <fx:Object name="three"/>
                    <fx:Object name="four"/>
                    <fx:Object name="five"/>
                    <fx:Object name="six"/>
                    <fx:Object name="seven"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>

</s:Application>

それが役に立ったら教えてください、ランス

于 2010-02-19T23:47:57.117 に答える
9

viatroposの回答は機能しますが、皮膚全体をできるだけ上書きしないようにする必要があります。

この場合、viatroposのVariableHeightDropDownListSkinコードで、彼がmaxHeight属性を削除したグループにも、「id」が指定されていることがわかります。

次に、DropDownListのドキュメントを見ると、SkinPartsセクションに「dropDown」スキンパーツがあることがわかります。これは実際にはDropDownListのプロパティです。

したがって、スキンをオーバーライドする代わりに、actionscriptを使用するだけで済みます（ここではUIComponent.DEFAULT_MAX_HEIGHTを使用しますが、任意の方法を使用できます）。

(MyDropDownList.dropDown as UIComponent).maxHeight = UIComponent.DEFAULT_MAX_HEIGHT;
于 2010-08-03T14:05:43.203 に答える
2

残念ながら、これはFlex3よりもFlex4の方がはるかに複雑です。

DropDownListのレイアウトをより高いレベルで定義できるはずですrequestedRowCount（詳細はこちら）が、6行を超える場合は、より多くの作業を行う必要があります（Flexの問題SDK-25364）。

于 2010-02-18T21:37:25.107 に答える
1

FB3では、ドロップダウンがリストコントロールの子孫であるため、rowCountです。FB4はおそらく似ています。

myDropdown.rowCount = 7;

私は通常もっと似たようなものを使います

myDropdown.rowCount = myDataProvider.lenght();
于 2010-02-18T20:35:45.687 に答える