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

2024-02-29 02:18

本文主要是介绍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}><ListViewdataSource={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;



效果图如下:












这篇关于ListView简单使用《二》—CollectionView效果实现案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/757292

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J