Remplissez HBox de la droite? VBox du fond?

Question

Je ne ai vraiment besoin, mais la réponse HBox figure que si nous obtenons une bonne réponse ici cela aiderait tout le monde d'essayer de faire une chose similaire avec un VBox. Il serait bon de savoir ce dans les deux et MXML actionscript.

J'ai HBox que je veux un texte aligné à gauche et à quelques radios de droite. Comme ceci:

 ___________________________________________________
|                                                   |
|Text                                Yes ()  No()   |
|___________________________________________________|

Je suis en train de faire cela en ayant une boîte invisible avec une largeur de 100% entre le texte et les radios, comme ceci

 _____ __________________________________ ________________
|     |                                  |                |
|Text | invisible box  percentWidth=100; | Yes ()  No()   |
|_____|__________________________________|________________|

Je préférerais avoir juste les radios dans leur propre HBox qui est Aligné à droite comme ceci:

 _____ ________________________________________________________
|     |                                                        |
|Text |                                         Yes ()  No()   |
|_____|________________________________________________________|

Je l'ai vu certains messages parlent d'une propriété horizontalAlign, mais je ne le vois pas dans la documentation nulle part.

Alors, comment puis-je y arriver?

Merci ~ Micro

Answer 1

Il y a une propriété horizontalAlign, et une propriété verticalAlign, sur les composants VBox et HBox (il a hérité de la case). Ils déterminent l'alignement horizontal et vertical des enfants du composant.

J'utilise généralement l'objet Spacer, comme Sam mentionne. Mais pour ce que vous voulez faire, cela fonctionnera très bien.

Dans MXML, vous pouvez faire quelque chose comme:

<mx:RadioButtonGroup id="yesNoRadioGroup"/>

<mx:HBox id="containingHBox" width="100%">
    <mx:Text id="textElement" width="200" text="lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj"/>
    <mx:HBox id="rightAlignedHorizontalContent" width="100%" horizontalAlign="right">
        <mx:RadioButton id="yesRadio" label="Yes" groupName="yesNoRadioGroup"/>
        <mx:RadioButton id="noRadio" label="No" groupName ="yesNoRadioGroup"/>
    </mx:HBox>
</mx:HBox>

Notez que le HBox avec le jeu de horizontalAlign doit avoir une valeur de largeur, sinon, il ne sera assez large pour accueillir la largeur de ses enfants, dans lequel l'alignement de cas est sans objet.

Voici une version AS:

<mx:Script>
    <![CDATA[
        import mx.controls.RadioButton;
        import mx.controls.RadioButtonGroup;
        import mx.controls.Text;

        private var containingHBox:HBox;
        private var textElement:Text;
        private var rightAlignedHorizontalContent:HBox;
        private var yesNoRadioGroup:RadioButtonGroup; 
        private var yesRadio:RadioButton;
        private var noRadio:RadioButton;

        override protected function createChildren():void
        {
            super.createChildren();

            containingHBox = new HBox();
            containingHBox.percentWidth = 100;

            textElement = new Text();
            textElement.width = 200;
            textElement.text = "lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj";

            rightAlignedHorizontalContent = new HBox();
            rightAlignedHorizontalContent.percentWidth = 100;
            rightAlignedHorizontalContent.setStyle("horizontalAlign","right");

            yesNoRadioGroup = new RadioButtonGroup();

            yesRadio = new RadioButton();
            yesRadio.label = "Yes";
            yesRadio.groupName = "yesNoRadioGroup";

            noRadio = new RadioButton();
            noRadio.label = "No";
            noRadio.groupName = "yesNoRadioGroup";


            addChild(containingHBox);

            containingHBox.addChild(textElement);
            containingHBox.addChild(rightAlignedHorizontalContent);

            rightAlignedHorizontalContent.addChild(yesRadio);
            rightAlignedHorizontalContent.addChild(noRadio);
        }
    ]]>
</mx:Script>

Answer 2

Si vous utilisez déjà HBox / VBox pour votre mise en page, puis à l'aide d'espacement est la bonne façon d'aller à déplacer certains éléments tout le chemin vers la droite / bas.

Une alternative est mise en page à base de contraintes. Ce qui est bon quand vous voulez ancrer le contenu à gauche, vous utilisez une toile comme le parent et l'enfant « droite = « 0 » » pour le positionner tout le chemin à droite. Cela est moins idéal lorsque vous empilez plusieurs éléments en fonction de leur taille. Vous pouvez utiliser une liaison, « droite = {} noComponent.width » pour mettre Oui juste à droite de No.