Как мне реализовать бесконечный список в Flex (герой) - PullRequest
2 голосов
/ 12 апреля 2011

Я новичок в Flex / ActionScript (до сих пор .NET / Java была моей главной площадкой).Я пытаюсь создать приложение Flex, у которого есть список, который должен выглядеть и вести себя как бесконечный список (элементов - это может быть любой объект).Идея состоит в том, что пользователь должен иметь возможность прокручивать вверх или вниз и никогда не достигать конца списка ни в одном направлении.

Примером может быть список чисел.Прокрутка вверх покажет отрицательные числа;прокрутка вниз покажет положительные.Теперь мой список представляет собой простой список Flex Spark (с использованием Flex Hero).Он связан с поставщиком данных, который является ArrayList.

Моя первоначальная идея состояла в том, чтобы прослушивать событие прокрутки и добавлять / удалять элементы по мере необходимости.Однако в текущей сборке Flex Hero есть ошибка, которая иногда не вызывает события прокрутки для вертикальных полос прокрутки (http://bugs.adobe.com/jira/browse/SDK-26533).

). Поэтому я использую обходной путь, предложенный в ссылке выше (т.е.прослушивание события propertyChanged в области просмотра скроллера списка. Это событие дает мне только текущее verticalScrollPosition.

И похоже, что искровой список по умолчанию поддерживает плавную прокрутку и вызывает событие много раз, прежде чем прокрутка списка дойдет доостановка (это хороший визуальный эффект).

Теперь мне нужно:

  1. Выяснить, прокручивается ли он вверх или вниз (как мне это сделать?)
  2. Выясните, какие элементы видны. Я могу получить это от:

    list.dataGroup.getItemIndicesInView()

  3. Добавить / удалить элементы по мере необходимости, поэтомучто пользователь может прокручивать вверх и вниз навсегда, не доходя до конца списка в любом направлении.

Я пробовал следующий код, но он не работает. (комментарии вкод).

Есть ли здесь специалисты по Flex?Пожалуйста, помогите.


        import mx.collections.ArrayList;
        import mx.core.INavigatorContent;
        import mx.events.FlexEvent;
        import mx.events.PropertyChangeEvent;

        var listData:ArrayList;
        var firstItemInView:int = 0;
        var lastItemInView:int = 0;
        var count = 0;

                    //gets the currently visible item indices (first and last)
        private function getVisibleIndices():Vector.<int> { 
            var ind:Vector.<int> = new Vector.<int>(2, true);
            ind[0] = firstItemInView;
            ind[1] = lastItemInView;
            return ind;
        }

        protected function view_creationCompleteHandler(event:FlexEvent):void {

                            //create an initialise list data
            listData = new ArrayList();
            for(var i:int = 0; i < 6; i++){
                listData.addItemAt(i, i);
            }
            infiniteList.dataProvider = listData;

            updateIndices();

            infiniteList.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, infiniteList_VerticalScroll_PropertyChanged);              
        }

                    //get the indices visible from the list's data group
        private function getNewIndices():Vector.<int> {
            var indices:Vector.<int> = new Vector.<int>(2, true);
            var indicesInView:Vector.<int> = infiniteList.dataGroup.getItemIndicesInView();
            if (indicesInView.length > 0){
                indices[0] = indicesInView[0];
            } 
            if (indicesInView.length > 1){
                indices[1] = indicesInView[indicesInView.length - 1];
            }
            return indices;
        }

        private function updateIndices():void {
            var indices:Vector.<int> = getNewIndices();
            if (indices.length > 0){
                firstItemInView = indices[0];
                if (indices.length > 1){
                    lastItemInView = indices[1];
                }
            }
        }

        protected function leftCalendar_VerticalScroll_PropertyChanged(event:PropertyChangeEvent):void {


            switch (event.property){
                case "verticalScrollPosition":

                    var indices:Vector.<int> = getNewIndices();
                    var oldIndices:Vector.<int> = getVisibleIndices();

                    var newNum:Number;


                    if (indices[1] - indices[0] == 2 && (oldIndices[0] != indices[0] && oldIndices[1] != indices[1])){
                        //a new item is in view. did we scroll up or down?
                        if (oldIndices[0] < indices[0]){
                            count++;
                            trace(count + " up : old[" + oldIndices[0] + "," + oldIndices[1] + "], new[" + indices[0] + "," + indices[1] + "]");
                            //newNum = Number(listData.getItemAt(listData.length - 1)) + 1;
                            //trace("new number to add: " + newNum);
                            //trace("todo remove: " + listData.getItemAt(0));
                            fixItems({ addAt : "top", removeAt : "bottom", newValue : newNum});

                        } else {
                            trace("down : old[" + oldIndices[0] + "," + oldIndices[1] + "], new[" + indices[0] + "," + indices[1] + "]");                               
                            fixItems({ addAt : "bottom", removeAt : "top", newValue : newNum});
                        }

                        //update indices:
                        updateIndices();
                        var newOnes = getVisibleIndices(); //seems to be getting the new ones, but the next occurance of this event handler doesn't pick up the new values! why?
                        trace(count + " current[" + newOnes[0] + ", " + newOnes[1] + "]");
                    }

                    break;
            }
        }

        protected function fixItems(data:Object):void {
            var item:Object;

            //add a new item
            if (data.addAt == "top"){
                listData.addItemAt(data.newValue, 0);
            } else {
                listData.addItem(data.newValue);
            }

            //remove one of the existing ones
            if (data.removeAt == "top"){
                item = listData.getItemAt(0);
                trace("removing " + item);
                listData.removeItemAt(0);
            } else {
                item = listData.getItemAt(listData.length - 1);
                trace("removing " + item);
                listData.removeItemAt(listData.length - 1);
            }
            updateIndices();
        }

Ответы [ 3 ]

2 голосов
/ 12 апреля 2011

Вы не можете использовать список. Вам придется создать свой собственный компонент для этого с нуля. Все компоненты, которые я знаю во Flex, используют конечный dataProvider для отображения информации. Если вы хотите бесконечность, вам нужно создать свой собственный компонент, который может обрабатывать диапазон (или вообще ничего), отображать его соответствующим образом и прокручивать. Обязательно очистите все элементы, которые больше не отображаются (или используйте их повторно), поскольку это может привести к серьезной утечке памяти.

0 голосов
/ 22 июля 2014

Может попробовать класс InfiniteScrollList ::

package components
{

import model.InfiniteListModel;
import model.LoadingVO;

import mx.core.ClassFactory;
import mx.events.PropertyChangeEvent;

import spark.components.IconItemRenderer;
import spark.components.List;

import views.itemRenderer.LoadingItemRenderer;

public class InfiniteScrollList extends List
{
    override protected function createChildren():void
    {
        super.createChildren();
        scroller.viewport.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler );
        itemRendererFunction = itemRendererFunctionImpl;
    }   

    protected function propertyChangeHandler( event : PropertyChangeEvent ) : void
    {
        //trace( event.property, event.oldValue, event.newValue );

        if ( event.property == "verticalScrollPosition" ) 
        {
            if ( event.newValue == ( event.currentTarget.measuredHeight - event.currentTarget.height )) 
            {
                fetchNextPage();
            }
        }
    }

    protected function fetchNextPage() : void
    {
        if ( dataProvider is InfiniteListModel )
            InfiniteListModel( dataProvider ).getNextPage();
    }

    private function itemRendererFunctionImpl(item:Object):ClassFactory 
    {
        var cla:Class = IconItemRenderer;
        if ( item is LoadingVO )
            cla = LoadingItemRenderer;
        return new ClassFactory(cla);
    }
}
}

Класс InfiniteListModel:

package model
{
    import flash.events.Event;
import flash.utils.setTimeout;

import mx.collections.ArrayCollection;
import mx.rpc.AsyncToken;
import mx.rpc.Responder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;

public class InfiniteListModel extends ArrayCollection
{
    private var _remoteObject : RemoteObject;

    protected var _loading : Boolean = false;

    public function get remoteObject():RemoteObject
    {
        return _remoteObject;
    }

    public function set remoteObject(value:RemoteObject):void
    {
        _remoteObject = value;
        if ( _remoteObject )
            getNextPage();
    }

    public function InfiniteListModel(source:Array=null)
    {
        super(source);
        addItem( new LoadingVO() );
    }

    public function getNextPage() : void
    {
        if ( !_loading)
        {
            _loading = true;

            trace( "fetching data starting at " + (this.length-1).toString() );
            var token : AsyncToken = remoteObject.getData( this.length-1 );
            var responder : Responder = new Responder( resultHandler, faultHandler );
            token.addResponder( responder );
        }
    }

    protected function resultHandler(event:ResultEvent):void
    {
        this.disableAutoUpdate();

        if ( this.getItemAt( this.length-1 ) is LoadingVO )
            this.removeItemAt( this.length-1 );

        for each ( var item : * in event.result )
        {
            addItem( item );
        }
        addItem( new LoadingVO() );
        this.enableAutoUpdate();

        _loading = false;
    }

    protected function faultHandler(event:FaultEvent):void
    {
        trace( event.fault.toString() );
    }
}
}

Для получения подробной информации, пожалуйста, обратитесь к следующему: http://www.tricedesigns.com/2011/10/26/infinitely-scrolling-lists-in-flex-applications/

0 голосов
/ 12 апреля 2011

Я думаю, что вам нужно создать свой собственный элемент управления List, который распространяет элемент arraycollection / arraylist для пользовательского интерфейса, ArrayCollection / Array / ArrayList должен использоваться только для хранения данных, таких как линейный список элементов, а List Control должен отображать элементы круговым способом.

РЕДАКТИРОВАНИЕ Я пытаюсь ответить на ваш вопрос, изменив данные в списке и направлении прокрутки, надеюсь, это поможет

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ScrollEvent;

            [Bindable]
            private var arr:Array = new Array(0,1,2,3,4,5);

            private var lastScrollPostion:int =0;
            private var isScrollingUp:Boolean = false;
            private function ltClicked(event:MouseEvent):void
            {
                arr.unshift(arr[0]-1);
                lst.dataProvider = arr;
            }
            private function rtClicked(event:MouseEvent):void
            {
                arr.push(arr[arr.length-1] +1); 
                lst.dataProvider = arr;
            }

            private function scrolled(event:ScrollEvent):void
            {
                if (lastScrollPostion < event.position)
                {
                    isScrollingUp = false;
                }
                else
                {
                    isScrollingUp = true;
                }
                lastScrollPostion = event.position;
                Alert.show("isScrollingUp : "+isScrollingUp.toString());
            }

        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:List 
            id="lst" 
            width="100%" 
            dataProvider="{arr}"
            scroll="{scrolled(event)}"
            />
        <mx:HBox>
            <mx:Button id="lt" label="&lt;&lt;" click="{ltClicked(event)}"/>
            <mx:Button id="rt" label="&gt;&gt;" click="{rtClicked(event)}"/>
        </mx:HBox>

    </mx:VBox>


</mx:Application>

ПРИМЕЧАНИЕ. Функции ltClicked и rtClicked изменяют список данных, а прокрутка используется для перехода кdirection

Я думаю, что лучший способ сделать это - расширить элемент управления List, чтобы получить направление и положение прокрутки, а также манипулировать массивом для добавления или удаления элементов в списке

.
...