Comment rendre visible un groupe, dans une largeur verticale contenant un RichText et définir sa hauteur pour s'adapter à RichText?

Question

Ici, je veux rendre notifyPanel visible après son changement d'état, avec une transition en douceur. Mais je veux laisser le notifyText avoir sa propre hauteur, ce que je veux dire c'est que si c'est multiline a une certaine hauteur sinon, en avoir d'autres. En raison de cela, je ne peux pas régler le notifyPanel.height = 20

<s:Group width="100%" height="100%" minHeight="10"> 
     <s:layout> 
      <s:VerticalLayout gap="0"/> 
     </s:layout> 

<!-- Here I want to make notifyPanel visible after changed to it's state, with a smooth transition. But I want to let the notifyText to have it's own height, what I mean is that if it's multiline has some height if not, have other. Because of this i can't just set the notifyPanel.height = 20 --> 
     <s:Group id="notifyPanel" width="100%" minHeight="0"> 
      <s:Rect height="100%" width="100%"> 
       <s:fill> 
        <s:SolidColor color="#48E200"/> 
       </s:fill> 
      </s:Rect> 
      <s:RichText id="notifyText" color="#ffffff" top="5" left="10" bottom="5" right="10" text="RichText"/> 
     </s:Group> 


     <s:Group height="100%" width="100%"> 
      <s:Rect height="100%" width="100%"> 
       <s:fill> 
        <s:SolidColor color="#FFFFFF"/> 
       </s:fill> 
      </s:Rect> 
      <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"/> 
     </s:Group> 


    </s:Group> 

Answer 1

Retirez la largeur & hauteur sur notifyPanel, qui le fera à la taille de son contenu. Supprimez également les contraintes sur notifyText afin qu'il soit également dimensionné à son contenu. Contrôlez les contraintes globales en définissant le paramètre minHeight & maxHeight sur notifyPanel.

<s:Group id="notifyPanel"> 
    <s:Rect height="100%" width="100%"> 
     <s:fill> 
      <s:SolidColor color="#48E200"/> 
     </s:fill> 
    </s:Rect> 
    <s:RichText id="notifyText" color="#ffffff" text="RichText"/> 
</s:Group>