Прокрутка элемента списка также приводит к прокрутке текстовых элементов.

Question

Я использую элемент списка с variableRowHeight и word-wrap, установленным в true, как в примере ниже:

http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/

При прокрутке списка с помощью колесика мыши текст в списке элементов также прокручивается. Я знаю, что это связано с высотой textField ... но я не уверен, как лучше решить эту проблему. Любые мысли приветствуются!

Проблема, с которой я столкнулся, также возникает в приведенном выше примере.

Answer 1

ОК, решил после небольшой работы. Думал, я бы поставил это здесь для других:

Эту проблему можно решить, просто расширив элемент List и ListItemRenderer и изменив пару строк:

Сначала расширьте элемент List:

package au.com.keeghan.controls {
    import mx.controls.List;
    import mx.core.ClassFactory;

    public class ExtendedList extends List{
        public function ExtendedList(){
            super();

            itemRenderer = new ClassFactory(ExtendedListItemRenderer);
        }
    }
}

Теперь мы хотим расширить вновь созданный рендерер элементов (ExtendedListItemRenderer). Поскольку на самом деле не так много кода требуется, мы можем просто поместить его в один файл .as. Мы делаем это, объявив его как внутренний класс и разместив его вне пакета выше ... чуть ниже закрывающей скобки:

import mx.controls.listClasses.ListItemRenderer;

internal class AsOneListItemRenderer extends ListItemRenderer{

    override protected function measure():void{
        super.measure();

        var w:Number = 0;

        if (icon)
            w = icon.measuredWidth;

        // Guarantee that label width isn't zero
        // because it messes up ability to measure.
        if (label.width < 4 || label.height < 4)
        {
            label.width = 4;
            label.height = 16;
        }

        if (isNaN(explicitWidth))
        {
            w += label.getExplicitOrMeasuredWidth();
            measuredWidth = w;
            measuredHeight = label.getExplicitOrMeasuredHeight();
        }
        else
        {
            measuredWidth = explicitWidth;

            label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3);
            label.validateNow();
            label.height = label.textHeight + 5;
            measuredHeight = label.getExplicitOrMeasuredHeight() + 3;          

            if (icon && icon.measuredHeight > measuredHeight){
                measuredHeight = icon.measuredHeight;
            }
        }
    }
}

Теперь большая часть приведенного выше кода на самом деле просто скопирована из ListItemRenderer, магия происходит внизу ... в частности, эти строки:

label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3);
label.validateNow();
label.height = label.textHeight + 5;
measuredHeight = label.getExplicitOrMeasuredHeight() + 3;

Все, что я здесь делаю, это добавляю некоторую высоту как к метке, так и к общей измеренной высоте, которая, в конце концов, и вызывает эту проблему.

Единственным недостатком этого решения является то, что вы получите большее количество отступов под элементом listItem, однако вы все равно можете сделать это хорошо, поиграв со свойствами verticalAlign и padding css.