拆解PowerApps - 请假申请 -6

上一节我们完成了HomeScreen 页面的解析,本节我们开始解析接下来的一个新的页面 NewRequestScreen。

1. 页面总体结构

这个页面的相当于是创建新申请的初始页面,用来引导用户创建请假申请。
从上图可用看到,这个页面的主体部分在于下部的 GalleryLeaveType。上部除返回按钮外,都是些起提示作用的文本标签。

2. 控件解析
2.1 iconBackNewRequest - 页面最左上角的一个返回图标。
icon  = Icon.ChevronLeft   //设置图标图案
OnSelect = Back()     //返回之前的页面,从哪个页面跳转过来就跳转回哪个页面

2.2 LabelNewRequestHeader   - 页面标题 
Text = "Create New"    //显示固定的文字

2.3 LabelCreateNewRequest - 提示文字标签
Text = "Create a new request."     //显示固定的文字

2.4 LabelNewRequestInfo  - 提示文字标签
Text = ""First, select the type of leave you
plan to take."."     //显示固定的文字
// 这里有一个文字排版的小技巧。查看标签的 Text 属性可以看到,这里有一个手动的回车换行。


//这时,控件会保持这种格式,即使拉大控件的横向尺寸,被手动换行的文字也不会整合到一行里(如下图)。

//而如果没有手动换行,控件里的文本就会根据其横向尺寸的大小自动换行(如下图)。这会涉及到设备屏幕的适配问题,如过强调格式统一,可以通过手工换行来保持队形一致。


2.5 Rectangle5 - 页面上部的蓝色长方形区域,起视觉效果作用。

2.6 GalleryLeaveType  
这个Gallery用来列示所有的假期类型,供用户选择后进行假期申请。
首先来看 GalleryLeaveType 层面,这里主要有两个设置:
 - Items  = LeaveTypeCollection   //对这个集合还有印象不? 它是第一节里在 App 的 OnStart 做的定义,需要回顾的可以点链接再去看看
//个人感觉这个Items的设置还是值得稍加关注,它涉及到为Gallery提供数据的实现方法。
//这里采用的方法是将一个预先设定好的Collection赋值给Items, 来当作Gallery的数据源。
//接下来马上就会涉及到如何读取到这些数据。

 - OnSelect = Set(_selectedLeaveType, ThisItem);      // 把当前点选的对象赋值给 _selectedLeaveType 变量。下一节就会用到这个变量
                      Navigate(SelectDatesScreen, None)     // 跳转到 SelectDatesScreen 页面

接下来,从本文最开始的截图里可以看到,这个GalleryLeaveType 里包括四个子控件:
A. Rectangle7  - 蓝色矩形框和下方的Gallery 之间的一条分割线。
之前见到的这种用于区域分割的Rectangle 控件都只会做一些样式上的设置,不过这个App里给它加了点击动作设置:
OnSelect  = Select(Parent)    //这个设置比较好理解,就是点击我就相当于点击我的上一级,这个上一级也就是刚刚提到的 GalleryLeaveType 的OnSelect设置。
B. icon5 - 右侧的 ">" 图标,设置了图标的样式文件: Icon = Icon.ChevronRight, 另外,也设置了OnSelect = Select(Parent)
C. Label12 - 文本标签,用来显示假期类型名称,设置了:Text = ThisItem.type //引用当前对象的 type值作为标签所显示的文字 。此外,也设置了OnSelect = Select(Parent)
D. Image2 - 左侧的一个图片性质的图标,设置了:Image = ThisItem.icon  //引用当前对象的 icon 值作图标 。此外,也设置了OnSelect = Select(Parent)

对于C、D 两个控件,稍加注意就能发现,抛开一个是图片一个是文字这点区别,其实它俩的性质及作用完全一样。
但这里却涉及到刚才在上面提到的从数据源里取值的问题。具体见下面的小贴士。

--------------------------------------------------------------------------------------------------------------------------------------------------
好了,页面已经解析完成。本节的内容还是比较简单的,最后就再插播一个有关集合(Collection)的小贴士吧:
选择文件菜单后,在Collections 里会看到所有当前 App 里用到的集合(如下图所示)。
结合上面 的Gallery层面设置的Items 以及刚刚提到的 Label12 和 Image2,应该可以领会到几点:
1. Items 其实就是用来设置数据源的。App 的 OnStart 里定义好这个LeaveTypeCollection 集合后,Gallery 就可以通过设置 Items 属性,指向设置好的集合,把集合作为数据源来获取并使用里面的数据。
2. 要使用数据源里的数据时,通过 " . " 这个属性选择器运算符从 Thisitem 对象里获取。比如 上面的 Image2 要获取icon 图标数据,就使用了 ThisItem.icon

想更清楚的理解这里的运作方式,可以在GalleryLeaveType里添加一个Label控件,你会发现系统会自动的把集合里的description 数据读取出来。
同时,在GalleryLeaveType的属性界面上,点击Fields的编辑按钮,也能看到集合里的三个字段全都列出来了(没加这个Lable控件之前,只有icon 和 type两个字段)。

好了,本节到此正式结束,下一节我们将开启下个新页面的解析,待续。。。
---------------------------------------------------------------------------------------------------- 

猜你喜欢

转载自blog.csdn.net/aladinggao/article/details/113561787
今日推荐