列出控制原理来解决

    写在最后几个月的文章已经。比较下班后忙,我没有太多的时间来写,想想几个月前还在上学的时候,他每天醒来的时候。这是一件幸福的事。该少年还在上学,好好珍惜。 今天是国庆长假前夕,我的同事很多早退回家。附近格位是空的,按一些同事的旧词:“好比过春节前的景象“。

没心情写代码,没心情改BUG,过来写篇文章也是好的。

    闲聊了几句,进入正题。列表控件不管是在PCclient程序、网页还是android APP都经经常使用到。其重要性就不在此强调了。我们先来说一下列表控件的构成:


上图是360云盘的截图。从图中的标注能够看出,列表控件的主要由3部分组成:

1、列表头,描写叙述每一列的含义

2、列表项容器。用于放置列表项的容器。

列表中的一行表示列表项,列表项能够觉得是一个单独的控件,由基础控件组成,例如以下图的列表项由一个icon控件和五个text控件组成(文件名称、位置、日期、类型、大小)


3、滚动栏,很重要的组成部分,滚动栏位置的变化导致列表项容器中内容的变化。

 

    说完构成。再来说说列表控件的工作原理。

    如果有50条数据。每一条数据被展示在一个列表项中,列表项的30像素,那么定义数据的总高度为 totalHeight = itemNum * itemHeight = 50 * 30 = 1500。

又如果列表项容器(简称为客户区)高度为300,非常显然最多能容纳10个列表项控件,即同一时候仅仅能显示10条数据。

初始化的时候,我们仅仅能看到前面10条数据。怎么才干把后面40条数据显示出来呢?答案非常easy,仅仅须要拖动滚动栏就可以,当然拖动滚动栏仅仅是表象,起作用的原理是:滚动栏的位置发生了变化。而依据滚动栏所在的位置计算得出的当前可显示的数据范围发生了变化。

例如以下表:

滚动栏位置         数据范围   

pos1                    [1,,10]  

pos2                    [11。 20]

pos3                    [21, 30]

......

     简单解释一下上表:滚动栏在位置pos1时,计算出可显示的数据为第1条到第10条,那么我们将从数据源(一般都成为DataSource)中取出这10条数据,并显示在客户区内。同理,当我们拖动滚动栏至pos2时,我们将从DataSource中取出第11条至第20条数据显示在界面上。也就是说。界面上的10个列表项控件始终存在,改变的仅仅是显示在列表项中的数据。仅仅是数据切换到控件上的速度太快。人眼感觉不到而已。那么问题又来了。怎么依据滚动栏的位置来计算当前显示的数据范围?

    先来看看滚动栏的构成:滚动栏控件 = 滚动槽 + 中间那个能够拖动的button(没有专业的名词。暂且叫滚动栏button),我们这里仅仅考虑垂直方向的滚动栏。水平方向的滚动栏略过。然后梳理一下几个高度概念:

    数据的总高度之前已经介绍过, totalHeight = itemNum * itemHeight

    客户区高度,它是不可变的(这里不考虑用户对窗体的拉伸,特殊情况后面在讨论),如果为clientHeight

    滚动栏的物理高度(能够理解为人眼实际看到的高度),事实上就是滚动槽的高度,如果为trackHeight

    滚动栏的逻辑高度,它的值等于totalHeight

    定义滚动栏的逻辑高度与物理高度为 rate  = totalHeight / trackHeight。简单理解为一个物理像素相当于rate个逻辑像素

    好吧,本质原理事实上就是将滚动栏所在位置的物理高度,换算为逻辑高度。然后依据逻辑高度计算可见的数据范围。

    有了上面几个概念。再来说“怎样按滚动栏的位置来取数据显示到界面”就简单了,举个样例:

    还是上面50条数据,则已知逻辑高度为1500,如果滚动栏在界面上的物理高度为300(通常的实际情况是。滚动栏的高度 = 客户区的高度 + 列表头的高度,这里为了方便计算。除去了列表头的高度。因此高度刚好等于客户区的高度)。计算可得:

    rate  = 1500 / 300 = 5

    那么当滚动栏的位置在最顶上时,即所在位置的物理高度为0时,那么显示的逻辑范围为[0,0 +  300],不难计算数据1到10在这个范围内。因此显示范围为[1, 10]。

假设滚动栏被拖动至物理高度为120的位置。那么显示的逻辑范围为[120 * 5, 120 * 5 + 300],那么開始下标为startIndex = 120 * 5 / 30 = 20, 结束下标endIndex = (120 * 50 + 300) / 30 = 30。这里注意一下。第20条数据位于的逻辑高度为[570, 600],因此第20条数据事实上无法显示出来,因此正确的显示范围为[21。 30] 。

    一句话来总结的管制清单的原则得到落实:位于滚动条的物理高度位置,在逻辑高度方面,计算的逻辑高度范围内的数据的当前显示的基础上,然后,在范围内的数据显示在客户区。

因此,我们普通拖动滚动条或鼠标滚动,客户区的内容可以有所不同,实际上动作的原理是在上述的结果。我们有时间去商量来商量如何对付伸展的一种形式、插入新的数据、代码删除数据以及控件的列表来实现。

原文地址:https://www.cnblogs.com/gcczhongduan/p/5039101.html