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

此案例是在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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值