List displaying multiple lines Adobe Flex/Actionscript

Im currently creating a list in Adobe Flex/Actionscript for a person search app. At the moment, the list shows 1 line of text:

    <fx:Script>
    <![CDATA[
        import model.PersonSummary;
        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;

        [Bindable]
        public var listOfP开发者_运维知识库eople:ArrayCollection;  

        public function populate():void{

            listOfPeople = new ArrayCollection(String(data).split("\n"));
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:List width="100%" id="results" dataProvider="{listOfPeople}" change="clickPerson(event)">
</s:List>

So listOfPeople is just a list of strings... Ive tried adding "\n" to each of these strings to effectively add lines and more detail but anything after the "\n" doesn't show on screen, any ideas?

Thanks Phil

For example:

---

Person1

Age

Sex

---

Person2

Age

Sex

---

etc

---

I would use an item renderer. Check out Adobe's docs to get started.

Example item renderer:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    borderStyle="none" backgroundColor="white" >

    <mx:Label text="{data.name}"/>
    <mx:Label text="{data.age}"/>
    <mx:Label text="{data.sex}"/>

</mx:VBox>

---

First, the Spark List component supports multiline rows with default item renderer out of the box. The following code works perfectly:

<?xml version="1.0" encoding="utf-8"?>
<s:Application creationComplete="populate()" minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        public var listOfPeople:ArrayCollection;

        public function populate():void
        {
            var testData:String = "Test\ntest,Test\ntest\ntest";
            listOfPeople = new ArrayCollection(testData.split(","));
        }
    ]]>
    </fx:Script>
    <s:List dataProvider="{listOfPeople}" horizontalCenter="0" verticalCenter="0" />
</s:Application>

But if you want more sophisticated List's rows you can implement your own item renderer as Jason pointed excepting effective Flex version. As I can see from your snippet you're using Flex 4.x but Jason's sample is for Flex 3.x. So you need to implement custom renderer using the following documentation.

Then you can place any amount of Labels or other controls in your custom renderer to display custom data.

---

This one works for me

<fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]private var people:ArrayCollection
            private var string:String = "test,test,test";

            private function init():void
            {
                people = new ArrayCollection(String(string).split(','));

            }
        ]]>
    </fx:Script>

    <s:List id="list" dataProvider="{people}" />