本文共 2693 字，大约阅读时间需要 8 分钟。

Demo展示

ios.gif

之前两篇文章ListView的学习都是展示了每一row的数据，而上面的效果图中不仅展示了row数据，而且还带有一个section header,当滑动时，这个section header会固定在头部，也就是吸顶效果。但是遗憾的是，在Android平台上不支持吸顶效果,如下图：

android.gif

Demo知识点

那如何来实现它了？我们都知道，在只简单地渲染每一行数据时，我们获取数据源时用ListView对象的cloneWithRows方法来获取的，而想要实现这种吸顶效果的话，需要使用 cloneWithRowsAndSections 方法。这个方法需要传入三个参数：

dataBlob        object类型sectionIDs        array娄型rowIDs            array类型

• dataBlob

它是一种数据结构，包含ListView所需的所有数据（section header 和 rows），如下图:

dataBlob.png

<font color=#ff0000 size=5 face="黑体">dataBlob 的 key 值包含 sectionID + rowId</font>,我们可以通过getSectionData 和 getRowData 来渲染每一行数据。

• sectionIDs

sectionIDs 用于标识每组section，如下图:

sectionIDs.png

• rowIDs

rowIDs 用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。

rowIDs.png

Demo实现

• 数据内容

  {    "data": [      {        "cars": [          {            "icon": "m_180_100",            "name": "AC Schnitzer"          },          {            "icon": "m_92_100",            "name": "阿尔法·罗密欧"          },          {            "icon": "m_9_100",            "name": "奥迪"          },          {            "icon": "m_97_100",            "name": "阿斯顿·马丁"          }        ],        "title": "A"      },      ...    ]  }

这里的'cars'和'title'属于data数据的一组，也就是我们上面讲的一组section数据，而它的sectionId就是0，因为是数组的第一个元素。然后title属于sectionHeader，而cars就是我们的row数据，而它的rowsId分别为：0~3

• 主要实现

  • 初始化ListView的dataSource对象，并且设置获取sectionHeader和sectionRow数据

    constructor(props) {      super(props);      var getSectionData = (dataBlob, sectionID) => {          return dataBlob[sectionID];      };      var getRowData = (dataBlob, sectionID, rowID) => {          return dataBlob[sectionID + ':' + rowID];      };      this.state = {          dataSource: new ListView.DataSource({              getSectionData: getSectionData, // 获取组中数据              getRowData: getRowData, // 获取行中的数据              rowHasChanged: (r1, r2) => r1 !== r2,              sectionHeaderHasChanged: (s1, s2) => s1 !== s2          })      };  }

  • 获取json数据，并将其放放dataBlob对象中

    var jsonData = this.props.data;  var dataBlob = {},      sectionIDs = [],      rowIDs = [],      cars = [];  for (var i in jsonData) {      //step 1、把组数据放入sectionIDs数组中      sectionIDs.push(i);      //step 2、把组中内容放dataBlob对象中      dataBlob[i] = jsonData[i].title;      //step 3、取出该组中所有的车      cars = jsonData[i].cars;      //step 4记录每一行中的数据      rowIDs[i] = [];      //step 5、获取行中每一组数据      for (var j in cars) {          //把行号放入rowIDs中          rowIDs[i].push(j);          //把每一行中的内容放dataBlob对象中          dataBlob[i + ':' + j] = cars[j];      }  }

  • 刷新状态，将数据传入到listView中

    this.setState({      dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)  });

  • 渲染ListView，设置相关属性

好了。ListView吸顶效果的学习就完成了。

参考资料

转载地址：http://vieni.baihongyu.com/