|  **银杏科技有限公司旗下技术文档发布平台**  ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^  版本  ^  日期  ^  作者  ^  修改内容  ^
|  V1.0  |  2020-12-28  |  yang  |  初次建立  | 

===== 实验二十七：lv_page页面  =====

==== 一、页面 ====

页面控件由一个背景和一个可滚动的顶层两个容器组成。它的主要部分称为**LV_PAGE_PART_BG**，这是页面的背景。它使用所有典型的背景样式属性，若使用填充将在其两边增加空间。可滚动对象可以通过** LV_PAGE_PART_SCRL** 部分引用，它还使用所有典型的背景样式属性和填充来在两侧添加空间。 

背景上绘制的滚动条 **LV_LIST_PART_SCROLLBAR** 是一个虚拟部件。它使用所有典型的背景样式属性、**size**来设置滚动条的宽度，以及**pad_right**和**pad_bottom**来设置间距。**LV_LIST_PART_EDGE_FLASH**也是背景的一个虚拟部分，当列表不能在该方向上进一步滚动时，在侧面画半圆。 

==== 二、创建子对象 ====

使用背景对象可以像页面本身一样引用，例如：若要设置页面的宽度可以使用**lv_obj_set_width(page, 100)**。用户在页面上创建的子对象会自动移动到页面的可滚动容器中。如果可滚动容器变得比页面尺寸更大，那么可以通过拖动来滚动页面。
默认情况下，可滚动容器的**LV_FIT_MAX**适合所有方向。这意味着可滚动的大小将与背景的大小（减去填充）相同，但是，当一个对象被定位在背景之外时，可滚动容器的大小会增加以包括它。

在某些情况下，用户若想要拖拽页面子对象的同时，页面本身也跟着移动，可以使用**lv_page_glue_obj(child, true)** 来使能该功能。

==== 三、滚动条 ====

当滑动页面时，滚动条可以根据四种策略显示，并通过 **HIDE/UNHIDE** 来隐藏/显示页面滚动条：
  * **LV_SCRLBAR_MODE_OFF**永远不显示滚动条
  * **LV_SCRLBAR_MODE_ON**始终显示滚动条
  * **LV_SCRLBAR_MODE_DRAG**在页面被拖动时显示滚动条
  * **LV_SCRLBAR_MODE_AUTO**当可滚动容器大到足以滚动时显示滚动条
  * **LV_SCRLBAR_MODE_HIDE**暂时隐藏滚动条
  * **LV_SCRLBAR_MODE_UNHIDE**显示以前隐藏的滚动条
用户可以通过函数 **lv_page_set_scrlbar_mode(page, LV_SCRLBAR_MODE_...)** 来更改滚动条显示策略，默认显示策略是 **LV_SCRLBAR_MODE_AUTO**。

==== 四、焦点 ====

页面上的子对象可以用lv_page_focus(page, child, LV_ANIM_ON/OFF) 设置焦点。更换焦点后页面将移动可滚动容器以显示焦点对象，移动的动画时间可以由函数  lv_page_set_anim_time(page, anim_time) 以毫秒为单位设置。不止页面的子对象可以获得焦点，页面的孙对象也可以获得焦点。

==== 五、导航与边缘指示 ====

若要通过命令来手动触发页面的滑动，可以使用函数 **lv_page_scroll_hor(page, dist)** 和 **lv_page_scroll_ver(page, dist)** 来控制页面的可滚动容器水平、垂直方向滑动。
边缘指示功能可通过 **lv_page_set_edge_flash(page, true)** 来使能。使能后，当滑动到页面边缘时，会在该方向上弹出半圆形的边缘指示。

==== 六、滚动传递 ====

如果列表是在其他可滚动元素上创建的（例如页面上），并且列表无法进一步滚动时，可以启用滚动传递功能 **lv_page_set_scroll_propagation(page, true)** 来将滚动传递到父对象上（例如页面），以继续在父对象上滚动。

==== 七、清空页面 ====

所有在页面上创建的对象都可以用**lv_page_clean(page)**。请注意，**lv_obj_clean(Page)**在这里不起作用，因为它也会删除页面的可滚动对象。有一些函数可以直接设置/获取可滚动对象的属性：
  * **lv_page_get_scrl()**
  * **lv_page_set_scrl_fit/fint2/fit4()**
  * **lv_page_set_scrl_width()**
  * **lv_page_set_scrl_height()**
  * **lv_page_set_scrl_fit_width()**
  * **lv_page_set_scrl_fit_height()**
  * **lv_page_set_scrl_layout()**

==== 八、事件 ====

在页面控件中，可滚动对象有一个默认的事件回调，它将以下事件传递给背景对象：
  * **LV_EVENT_PRESSED**
  * **LV_EVENT_PRESSING**
  * **LV_EVENT_PRESS_LOST**
  * **LV_EVENT_RELEASED**
  * **LV_EVENT_SHORT_CLICKED**
  * **LV_EVENT_CLICKED**
  * **LV_EVENT_LONG_PRESSED**
下面的键由页面处理：
  * **LV_KEY_RIGHT/LEFT/UP/DOWN**滚动页面

{{ :icore4t:icore4t_rtt_lvgl_27_1.gif?direct |}}

<code c>
LV_FONT_DECLARE(kai_16);                                          /* 声明中文字体 */
void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                     /* 初始化lvgl2rtt */
	
	lv_obj_t * page = lv_page_create(lv_scr_act(), NULL); /* 创建页面 */
	lv_obj_set_size(page, 390, 200);                          /* 设置尺寸 */
	lv_page_set_edge_flash(page, true);                       /* 开启边缘提示 */
	lv_obj_align(page, NULL, LV_ALIGN_CENTER, 0, 0);          /* 设置位置 */

	lv_obj_t * label = lv_label_create(page, NULL);           /* 在页面中创建标签 */
	lv_obj_set_style_local_text_font(page, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &kai_16);/* 设置字体 */
	lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);      /* 标签长文本模式，自动换行 */
	lv_obj_set_width(label, lv_page_get_width_fit(page));    /*设置标签宽度不超过页面宽度*/
	lv_label_set_text(label, "将进酒 李白 \n"	         /* 设置显示内容 */
				"君不见黄河之水天上来，奔流到海不复回。 \n"  
				"君不见高堂明镜悲白发，朝如青丝暮成雪。 \n"	
				"人生得意须尽欢，莫使金樽空对月。 \n"	
				"天生我材必有用，千金散尽还复来。 \n"	
				"烹羊宰牛且为乐，会须一饮三百杯。 \n"	
				"岑夫子，丹丘生，将进酒，君莫停。 \n"	
				"与君歌一曲，请君为我侧耳听。 \n"	
				"钟鼓馔玉不足贵，但愿长醉不愿醒。 \n"	
				"古来圣贤皆寂寞，惟有饮者留其名。 \n"	
				"陈王昔时宴平乐，斗酒十千恣欢谑。 \n"	
				"主人何为言少钱，径须沽取对君酌。 \n"	
				"五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 ");
	while(1){
		for(int i=0;i<90;i++){
			rt_thread_mdelay(100);                 /* 滑动页面内标签 */
			lv_page_scroll_ver(page, -5);}
		for(int i=0;i<130;i++){
			rt_thread_mdelay(100);
			lv_page_scroll_ver(page, 5);}
	}
}
</code>