How to change font styles in a List component (Starling version)

A List component contains a number of item renderers that display some text. Let's look at how to change the font styles in the item renderers outside of the theme.

The item renderer font styles

We can customize the item renderers inside the list's itemRendererFactory. As long as we aren't setting any advanced font styles on the item renderer's text renderer (and the theme isn't either), we can pass a starling.text.TextFormat directly to the item renderer's fontStyles property.

var list:List = new List();
list.itemRendererFactory = function():IListItemRenderer
{
	var itemRenderer:DefaultListItemRenderer = new DefaultListItemRenderer();
	itemRenderer.fontStyles = new TextFormat( "Arial", 20, 0x3c3c3c );
	return itemRenderer;
};

If we wanted to change the item renderer's font styles inside the theme, we could set the list's customItemRendererStyleName property and extend the theme.