web-dev-qa-db-fra.com

comment obtenir un contrôle de texte Flex au retour à la ligne Word

Je crée une application Adobe Flex et j'ai un contrôle Text (mx: Text), qui est censé être utilisé lorsque vous avez besoin de texte multiligne non modifiable (par opposition à une étiquette, qui est du texte non modifiable sur une seule ligne). Mon contrôle de texte ne s'encapsule pas lorsque je redimensionne la fenêtre du navigateur pour qu'elle soit plus petite que le texte (ou que je la charge avec la fenêtre du navigateur déjà plus petite). En consultant ce doc que j'ai trouvé, il semblerait que la fonctionnalité Word-wrap ne se produise que si vous spécifiez une largeur absolue en pixels. C'est exactement ce que j'essaie d'éviter. Je veux que le texte soit placé à l'intérieur de la taille donnée à mon objet Flash afin qu'il soit toujours visible ... existe-t-il un moyen d'y parvenir, grâce à une propriété qui me manque ou peut-être un contrôle différent? Merci.

apache-flextextword-wrap
33
rmeador

J'ai eu le même problème. Dans mon cas, j'avais un bloc mx: Text (qui DEVRAIT avoir enveloppé), et cet objet mx: Text était incorporé dans DEUX conteneurs mx: VBox.

La seule façon dont j'ai réussi à envelopper le texte était de faire les deux opérations suivantes:

  1. placez la propriété 'width = "100%"' dans CHAQUE conteneur VBox (dans lequel réside le texte mx:).
  2. mettre la propriété 'width = "100%"' dans CHAQUE objet mx: Text (résidant dans cette imbrication de VBox)

Très peu intuitif, mais c'est ce qui a fonctionné pour moi.

J'espère que ceci vous aide!

Jon Kinsting

25
Jon Kinsting

Les largeurs et hauteurs en pourcentage se résolvent en réalité à leurs équivalents de pixels, donc leur utilisation devrait obtenir l'habillage et la taille relative que vous recherchez. Par exemple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.Adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
</mx:Application>

C'est-à-dire, à condition qu'il y ait un paramètre de largeur de toute sorte, le dimensionnement relatif (un nombre explicite, un pourcentage, une ancre basée sur des contraintes - par exemple, en haut, à droite, en bas, à gauche - etc.) devrait faire en sorte que le texte s'enroule naturellement . Cette approche ne fonctionne-t-elle pas avec la mise en page que vous utilisez? Sans code, c'est difficile à dire, mais vous avez raison - l'encapsulage nécessite de définir une propriété liée à la largeur sur le conteneur.

Le redimensionnement et l'habillage peuvent être un peu délicats, cependant, selon le contexte, donc si vous trouvez que cela ne fonctionne pas, essayez de publier du code - je suis sûr que l'un de nous sera en mesure de vous aider à le comprendre.

5
Christian Nunciato

Si vous essayez de faire en sorte que l'habillage de texte fonctionne dans un composant MXML, essayez ceci:

<mx:Text id="testText"  
  width="{ this.width }"
  height="100%"   
  text="Your text here" />

Vous définissez essentiellement la largeur sur la largeur du composant et le réglage de la hauteur sur 100% lui permettra de s'enrouler correctement lorsque vous réduisez la taille.

4
jerrylroberts

Donc l'exemple de Christian d'une application avec un élément texte à l'intérieur du travail, mais il est beaucoup trop facile de bousiller la mise en page. Il suffit d'ajouter une VBox entre les deux et le wrapping ne pas fonctionne:

<mx:Application xmlns:mx="http://www.Adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />    
</mx:VBox>
</mx:Application>
0
Matt Hughes

Vous pouvez essayer d'ajouter un gestionnaire d'événements au nœud parent pour Event.RESIZE Et appeler la méthode validateNow() de l'objet Text. (Peut-être précédé d'un appel à invalidateSize().) Pourquoi cela ne se produit-il pas automatiquement, je ne peux pas le dire.

0
David Hanak

Je pense qu'appliquer VBox width = "100%" et Text width = "100%" est le moyen le plus simple. Remarque: si le texte est généré dynamiquement, n'oubliez pas de faire text.percentWidth = 100

0
hwii77