В Mobile-Flex, как разместить компоненты на каждой границе VerticalLayout?

Question

В mobile-flex Я хочу разместить одну кнопку слева, а другую - справа на экране, что-то вроде этого:

На данный момент вот как я создал экран без кнопки справа:

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:exp="http://flex.apache.org/experimental/ns"
            title="Liste" creationComplete="creationCompleteHandler(event)">
        <s:layout>
            <s:VerticalLayout gap="5" horizontalAlign="left" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
        </s:layout>
        <fx:Script>
            <![CDATA[
                import model.Db;

                import mx.collections.ArrayCollection;
                import mx.events.FlexEvent;

                private const dataProvider:ArrayCollection = new ArrayCollection();

                protected function creationCompleteHandler(event:FlexEvent):void
                {
                    var src:Array = [];
                    var db:Db = new Db();
                    var enreg:String = db.getDbSo("enreg");
                    var tabEnreg:Array = enreg.split("\n");

                    for (var i:int = 0; i <tabEnreg.length; i++)
                    {
                        var cols:Array = String(tabEnreg[i]).split(";");
                        src.push({col1: cols[0], col2: cols[1]});
                    }
                    dataProvider.source = src;
                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
        </fx:Declarations>
        <s:Button id="btn_add" label="Ajouter" click="navigator.pushView(AjoutView)" />
        <exp:MobileGrid id="dgm" dataProvider="{dataProvider}" width="100%" height="95%" >
            <exp:columns>
                <exp:MobileGridColumn dataField="col1" headerText="Colonne 1" width="50%"/>
                <exp:MobileGridColumn dataField="col2" headerText="Colonne 2" width="50%"/>
            </exp:columns>
        </exp:MobileGrid>
    </s:View>

Поэтому я хочу добавить еще одну кнопку в правой части экрана на том же горизонтальном уровне кнопки "btn_add".

Так как же добавить другую правую кнопку в этом случае? Или я должен подумать другой макет для этого?

Answer 1

Вам нужно использовать вложенные Group в вашем макете. Что-то вроде этого:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <s:layout>
        <s:VerticalLayout gap="5" horizontalAlign="left" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
    </s:layout>

    <s:Group width="100%">
        <s:Button id="button1" right="0"/>
        <s:Button id="button2" left="0"/>
    </s:Group>
</s:View>

Answer 2

Чтобы расширить ответ Бабибу, вы также можете использовать вложенную HGroup:

<?xml version="1.0" encoding="utf-8"?>

<s:HGroup width="100%">
    <s:Button id="button1" />
    <s:Spacer width="100%" />
    <s:Button id="button2" />
</s:HGroup>