zoukankan      html  css  js  c++  java
  • Flex中List自己定义itemrenderer渲染问题的解决

    我们经常需要在List组件中自定义itemrenderer来满足我们同时显示多种内容的要求。比如增加一个CheckBox,这个在itemrenderer里实现很容易。

    代码如下:

    代码
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s
    ="library://ns.adobe.com/flex/spark"
    xmlns:mx
    ="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:layout>
    <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
    <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    </fx:Declarations>

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

    [Bindable]
    private var dataArr:ArrayCollection = new ArrayCollection([
    {id:
    0,label:"西瓜"},
    {id:
    1,label:"黄瓜"},
    {id:
    2,label:"土豆"},
    {id:
    3,label:"南瓜"},
    {id:
    4,label:"西红柿"},
    {id:
    5,label:"韭菜"},
    {id:
    6,label:"辣椒"}]);
    ]]
    >
    </fx:Script>

    <s:List x="90" y="51" width="161" height="71" dataProvider="{dataArr}"
    itemRenderer
    ="ListItemRenderer" >
    </s:List>
    </s:Application>
    代码
     

    <?xml version="1.0" encoding="utf-8"?>
    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="true">
     <s:layout>
      <s:HorizontalLayout verticalAlign="middle"/>
     </s:layout>


     <s:CheckBox id="ck" selected="{data.ck}" x="0" y="0"/>
     <s:Label text="{itemIndex}"/>
     <s:Label text="{data.label}"/>
     
    </s:ItemRenderer>

    但有个问题,当我们对List进行数据绑定后,如果数据太多,就会出现滚动条。这时,如果我们选中了第一个CheckBox,如果拖支滚动条的时候,下面的某个项的CheckBox也会被选中。

    在网上搜了一些结果后,估计原因是List在滚动的时候,会重用原有的对象,而不是新建。解决办法如下:

    在绑定数组对象里加一个Boolean类型的变量,下面为ck

    ListTest
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s
    ="library://ns.adobe.com/flex/spark"
    xmlns:mx
    ="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:layout>
    <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
    <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    </fx:Declarations>

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

    [Bindable]
    private var dataArr:ArrayCollection = new ArrayCollection([
    {id:
    0,label:"西瓜",ck:true},
    {id:
    1,label:"黄瓜",ck:false},
    {id:
    2,label:"土豆",ck:false},
    {id:
    3,label:"南瓜",ck:false},
    {id:
    4,label:"西红柿",ck:false},
    {id:
    5,label:"韭菜",ck:false},
    {id:
    6,label:"辣椒",ck:false}]);
    ]]
    >
    </fx:Script>

    <s:List x="90" y="51" width="161" height="71" dataProvider="{dataArr}"
    itemRenderer
    ="ListItemRenderer" >
    </s:List>
    </s:Application>

    同时,在ItemRenderer中处理一下CheckBox的数据改变事件

    ListItemRenderer
    <?xml version="1.0" encoding="utf-8"?>
    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s
    ="library://ns.adobe.com/flex/spark"
    xmlns:mx
    ="library://ns.adobe.com/flex/mx"
    autoDrawBackground
    ="true">
    <s:layout>
    <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>
    <fx:Script>
    <![CDATA[
    import mx.events.FlexEvent;

    protected function changeHandler(event:Event):void
    {
    data.ck
    = ck.selected;
    }

    ]]
    >
    </fx:Script>

    <s:CheckBox id="ck" selected="{data.ck}" x="0" y="0" change="changeHandler(event)"/>
    <s:Label text="{itemIndex}"/>
    <s:Label text="{data.label}"/>

    </s:ItemRenderer>

    这样就没有问题了。大家可以试试。

  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/liongis/p/1807099.html
Copyright © 2011-2022 走看看