1

MyLabel1次の mxml コードを実行すると、 が他のラベル (例: MyLabel2) および 2 行目の他の項目よりも上にあることがわかります。

MyLabel1などとインラインになるようにコードを変更するにはどうすればよいMyLabel2ですか?

MyLabel2現在のように、変更を行う場合は、 、MyLabel3、およびのグループを(左側) と (右側) のMyButton3間で等間隔に配置する必要があることに注意してください。つまり、2 行目のこの中央のグループはコンテナの中央に配置されていませんが、左右に等しいスペースがあります。MyLabel1MyLabel4

<?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" 
           minWidth="200" minHeight="300">

<s:VGroup top="10" left="20" right="20">

    <s:Group width="100%">

        <s:HGroup left="0" top="5" verticalAlign="baseline">
            <s:Label text="Some Text Here" />
        </s:HGroup>

        <s:HGroup right="0" verticalAlign="baseline">
            <s:Button label="Button1" width="65"/>
            <s:Button label="Button2" width="65"/>
        </s:HGroup>

    </s:Group> 

    <s:Spacer height="2"/>

    <s:HGroup width="100%" >

        <s:HGroup >
            <s:Label text="MyLabel1"/>
        </s:HGroup>

        <s:Spacer width="100%"/> 

        <s:HGroup verticalAlign="baseline">
            <s:Label text="MyLabel2"/>
            <s:Label text="MyLabel3"/>
            <s:Button label="MyButton3" width="85"/>            
        </s:HGroup>

        <s:Spacer width="100%"/>

        <s:HGroup verticalAlign="baseline">
            <s:Label text="MyLabel4"/>
            <s:TextInput id="myID" />  
        </s:HGroup>

    </s:HGroup>

</s:VGroup>

4

2 に答える 2

1

試す：

3 つの hgroup verticalAlign を middle に設定して、含まれるアイテムがコンポーネントの高さの中央に配置されるようにします...

次に、3 つの hgroup の高さを指定する必要があります。これは、最初の hgroup には (特定の高さを持つ) ラベルのみが存在するためです。 hグループ 1)

グループのカスタム高さを使用して、内部コンポーネントによって設定された高さをオーバーライドします

<s:VGroup top="10" left="20" right="20">

    <s:Group width="100%">

        <s:HGroup left="0" top="5" verticalAlign="baseline">
            <s:Label text="Some Text Here" />
        </s:HGroup>

        <s:HGroup right="0" verticalAlign="baseline">
            <s:Button label="Button1" width="65"/>
            <s:Button label="Button2" width="65"/>
        </s:HGroup>

    </s:Group> 

    <s:Spacer height="2"/>

    <s:HGroup width="100%" >

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel1"/>
        </s:HGroup>

        <s:Spacer width="100%"/> 

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel2"/>
            <s:Label text="MyLabel3"/>
            <s:Button label="MyButton3" width="85"/>            
        </s:HGroup>

        <s:Spacer width="100%"/>

        <s:HGroup verticalAlign="middle" height="25">
            <s:Label text="MyLabel4"/>
            <s:TextInput id="myID" />  
        </s:HGroup>

    </s:HGroup>

</s:VGroup>
于 2012-05-02T08:26:54.077 に答える
1

最も外側の HGroup に verticalAlign="baseline" を追加するだけです。

<?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" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

        <s:VGroup top="10" left="20" right="20">

            <s:Group width="100%">

                <s:HGroup left="0" top="5" verticalAlign="baseline">
                    <s:Label text="Some Text Here" />
                </s:HGroup>

                <s:HGroup right="0" verticalAlign="baseline">
                    <s:Button label="Button1" width="65"/>
                    <s:Button label="Button2" width="65"/>
                </s:HGroup>

            </s:Group> 

            <s:Spacer height="2"/>

            <s:HGroup width="100%" verticalAlign="baseline" >

                <s:HGroup>
                    <s:Label text="MyLabel1"/>
                </s:HGroup>

                <s:Spacer width="100%"/> 

                <s:HGroup verticalAlign="baseline">
                    <s:Label text="MyLabel2"/>
                    <s:Label text="MyLabel3"/>
                    <s:Button label="MyButton3" width="85"/>            
                </s:HGroup>

                <s:Spacer width="100%"/>

                <s:HGroup verticalAlign="baseline">
                    <s:Label text="MyLabel4"/>
                    <s:TextInput id="myID" />  
                </s:HGroup>

            </s:HGroup>

        </s:VGroup>     

</s:Application>
于 2012-05-02T11:59:24.463 に答える