ListView简单使用《二》—>CollectionView效果实现案例

来源：互联网发布：vb在光标位置输入文字编辑：程序博客网时间：2024/04/30 16:06

此案例是在ListView基础上进行的进一步深化使用，步骤与ListView一致，首先还是设置ListView的DataSource，注意事项与前一篇 ListView的简单使用《一》—>普通图文展示案例一致，直接上代码：

getInitialState(){    var dss = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});    return {        dataSource:dss.cloneWithRows(ImgDatas.data)    }},

向界面添加展示数据的ListView，此处为达到CollectionView的效果，最重要的是对ListView的 contentContainerStyle 进行设置，即对ListView里面的内容进行设置。

render() {    return (        <View style={styles.container}>          <ListView              dataSource={this.state.dataSource}              renderRow={this.renderRow}              contentContainerStyle={styles.listViewStyle}          />        </View>    );},

添加每行显示的控件，并进行可点击设置，并进行返回，renderRow方法中的四个参数依次为，每行的数据、行ID，组ID，以及高亮显示的行，可省略不写，也可根据自己的需求，进行相应的添加。

 renderRow(rowData,rowID,sectionID,highlightRow){    return(        <TouchableOpacity activeOpacity={0.5} onPress={this.cellTouched}>            <View style={styles.cellContentViewStyle}>                <Image style={styles.cellImageStyle} source={{uri:rowData.icon}}/>                <Text>{rowData.title}</Text>            </View>        </TouchableOpacity>    );},

每行的点击事件，点击之后需要做什么都在这个方法中实现

cellTouched(){},

在该案列中，最主要的是对界面布局的CSS样式的设置，设置如下：

const styles = StyleSheet.create({    container: {        flex: 1,    },    listViewStyle:{        flexDirection:'row',        // //多行显示        flexWrap: "wrap",        alignItems: 'flex-start',    },    cellContentViewStyle:{        width:cellWH,        height:cellWH,        marginLeft:Hmargin,        marginTop:Vmargin,        alignItems:'center'    },    cellImageStyle:{        width:80,        height:80,        marginBottom:5,    },});

需要特别注意的是：
1.我们设置collectionView效果时，主要是对ListView的content进行设置，设置为多个行显示在一排上，而不是单独一行就占一排的位置，因此需要设置flexDirection为横向显示，值为row。
2.当显示为横排之后，就不会出现一行占一排的情况，但当我们直接设置flexWrap为换行显示即值为wrap，我们并没有看到其他对应的控件展示，然而ListView却占了相应的空间和大小，点击其他区域的时候，响应事件的是第一排显示的几个，其实并不是没有显示出来，只是显示到屏幕之外去了，我们需要设置每排都从左侧位置开始，即可看见所有元素，即设置alignItems为侧轴起始边界开始：如下：
alignItems: 'flex-start'

本案例中用到的几个比较重要的属性：

1.获取屏幕宽度

var Dimensions = require('Dimensions');
var windowWidth = Dimensions.get('window').width;

2.设置每行显示个数

var cols = 3;

3.设置每个cell的宽度

var cellWH = 100;

4.计算cell中间距离

var Hmargin = (windowWidth - cellWH * cols) / (cols + 1);

5.ListView设置上边距

var Vmargin = 25;

效果图如下：

1 0