3

私はこれにまともな髪のトリビュートを支払いました
なぜ世界で、ラベル1とラベル2は異なる垂直方向の配置を持っているのですか？

        <s:Form width="100%">
            <s:FormHeading width="100%" label="Heading" />
            <s:FormItem width="100%" label="Label 1">
                <s:HGroup verticalAlign="bottom">
                    <s:Label text="Size" fontSize="40"/>
                    <s:Label text="Mb"/>                        
                </s:HGroup>
            </s:FormItem>
            <s:FormItem width="100%" label="Label 2">
                <s:HGroup verticalAlign="middle">
                    <s:VGroup horizontalAlign="center">
                        <s:Label text="Set1" />
                        <s:Label text="{this.set1}" fontSize="40"/>
                        <s:Label text="Days" />
                    </s:VGroup>
                    <s:Label text="+" fontSize="40" />
                    <s:VGroup horizontalAlign="center">
                        <s:Label text="Set2" />
                        <s:Label text="{this.set2}" fontSize="40" />
                        <s:Label text="Days" />
                    </s:VGroup>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
4

1 に答える 1

5

バグまたは機能？aのラベルは、のコンテンツのFormItemベースラインに合わせて調整されます。FormItem写真には千以上の言葉が書かれているので、何が起こるかをお見せします。

FormItemベースライン

それで、それは機能であることがわかりました（この質問をしてくれてありがとう：私は今日までこれを自分で知りませんでした）。

この機能を「修正」するには、カスタムスキンを作成する必要があります。元のスキンをコピーしてスキンクラスを作成しますspark.skins.spark.FormItemSkin。;
という要素を見つけます。labelDisplay次のようになります。

<s:Label id="labelDisplay"
         fontWeight="bold"
         left="labelCol:0" right="labelCol:5" 
         bottom="row1:10" baseline="row1:0"/>

そのbaseline属性を見ますか？それが望ましくない動作を引き起こしているものです。
簡単に削除できます。その後、ラベルは常に下に揃えられます。垂直方向の中心に揃えたい場合は、次のように変更できます。

<s:Label id="labelDisplay" fontWeight="bold" verticalAlign="middle"
         left="labelCol:0" right="labelCol:5" top="row1:10" bottom="row1:10"/>

これで、必要なのは、カスタムスキンをFormItemに適用することだけです。

<s:FormItem skinClass="my.custom.FormItemSkin">

または、より頻繁に使用する場合：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|FormItem.centeredLabel {
        skinClass: ClassReference("my.custom.FormItemSkin");
    }
</fx:Style>

<s:FormItem styleName="centeredLabel">
于 2012-11-13T14:16:01.233 に答える