How do you make buttons that have a specific length?
<p>I'm having difficulty using a customlistrenderer class and homescreen class.</p>

<p>Here's my Homescreen class that contains the function generateData(), which is supposed to display a scroller of 22 buttons.  </p>

<pre><code>private function generateData(): void{

        var list: List = new List();
        list.width = 235;
        list.height = 380;
        list.name = "HomeScreenList";
        this.addChild(list);

        var rows:int = 6;
        var iterator:int = 0;
        var num:int = 22;
        var counter:int = 0;
        var obj:Object;
        var heroName:Array = ["ana", "bastion", "d.va", "genji", "hanzo", "junkrat", "lucio",
        "mccree", "mei", "mercy", "pharah", "reaper", "reinhardt", "roadhog", "soldier76", "symmetra",
        "torbjorn", "tracer", "widowmaker", "winston", "zarya", "zenyatta"];
        var temp:Array = []

        obj = new Object();
        while(iterator &lt; rows){

        obj.name1 = heroName[counter];
        obj.image1 = myResource.getImage(heroName[counter]);
        obj.name2 = heroName[counter+1];
        obj.image2 = myResource.getImage(heroName[counter+1]);
        obj.name3 = heroName[counter+2];
        obj.image3 = myResource.getImage(heroName[counter+2]);
        obj.name4 = heroName[counter+3];
        obj.image4 = myResource.getImage(heroName[counter+3]);
        temp.push(obj);
        counter+4;
        iterator++;
        }

        var collection:ListCollection = new ListCollection(temp);

        //assign the renderer
        list.itemRendererType = CustomMenuListRenderer;
        list.dataProvider = collection;
        list.addEventListener(Event.CHANGE, onChange);

        this.addChild(list);
        list.validate();


    }
</code></pre>

<p>and the CustomMenuListRenderer class, under the initialize() function</p>

<pre><code>super.initialize();
        firstButton = new Button();
        this.addChild(firstButton);
        firstButton.x = 20;
        firstButton.y = 100;
        firstButton.scale = 0.60;
        secondButton = new Button();
        secondButton.x = 92;
        secondButton.y = 100;
        secondButton.scale = 0.60;
        thirdButton = new Button();
        thirdButton.x = 163;
        thirdButton.y = 100;
        thirdButton.scale = 0.60;
        fourthButton = new Button();
        fourthButton.x = 235;
        fourthButton.y = 100;
        fourthButton.scale = 0.60;

        firstButton.addEventListener(Event.TRIGGERED, onTrigger);
        secondButton.addEventListener(Event.TRIGGERED, onTrigger);
        thirdButton.addEventListener(Event.TRIGGERED, onTrigger);
        fourthButton.addEventListener(Event.TRIGGERED, onTrigger);
</code></pre>

<p>The problem is since the loop displays the 4 buttons each loop, an error occurs at the 23rd button(since I only specified 22 buttons but I declared 4 buttons on the CustomMenuListRenderer class) in the 6th row. </p>

<p>My question is how do I fix this issue?</p>