android 详情页设计 app详情页介绍

接上一节，本节介绍详情页面。

详情页面用来显示BrowseScreen1里所点选条目的具体信息。如下图，通过不同颜色对应每个控件在页面中所在的位置。

 

页面主要有四个主要的组件： 

1. 表单DetailForm1： 用来显示从列表里获取的数据。 

和上面提到的一样，可以按需通过点击右键，从上文菜单里执行删除、重命名等操作（为便于展示，这里切换成了中文菜单） 

同样的，可以在右侧的属性栏里，点击编辑字段来添加、删除字段以及调整字段在页面中的位置顺序。

表单的默认显示为垂直布局，可以选中表单然后在右侧属性栏的布局项选择水平来调整为水平，如下： 

选择水平后的效果如下：

2. 返回按钮IconBackarrow1（向左的箭头图标）：用来返回到BrowseGallery1页面。 按钮的主要属性设置为：

• OnSelect = Navigate(BrowseScreen1, ScreenTransition.None)   ---- 用来设定点选这个按钮时的动作 
• Icon = Icon.ChevronLeft     ---- 用来设定图标样式，也就是向左的箭头。 
• DisplayMode = Edit   ---- 用来设定显示模式，显示模式有三种: 禁用（Disable）、编辑(Edit)和视图(View)。
• PressedFill = RGBA(255, 255, 255, 0.3)  ---- 用来设定点中按钮时的颜色填充，默认为白色（255，255，255），透明度0.3. 

提示: RGBA 是 Red, Green, Blue, Alpha的首字母，也就是光的三原色红绿蓝，外加一个透明度。

对于具有颜色设置的控件，当你通过RGBA 设置好颜色后，光标放在数值后，系统会自动显示当前的颜色。

3. 删除按钮IconDelete1:  用来删除选中的条目。 按钮的主要属性设置为:

• OnSelect = Remove([@FATransfer], BrowseGallery1.Selected); If (IsEmpty(Errors([@FATransfer],BrowseGallery1.Selected)), Back())  ---- 首先从数据源里删除选中的条目；然后判断数据源里选中的条目是否有报错，如果没报错（IsEmpty()就会等于true）则执行返回动作（否则返回报错信息）。
• Icon = Icon.Trash   ---- 和上面一样， 用来设置图标样式 
• DisplayMode = If(!IsBlank(BrowseGallery1.Selected) && DataSourceInfo([@FATransfer],DataSourceInfo.DeletePermission), DisplayMode.Edit, DisplayMode.Disabled)    ---- 如果选中的条目不为空并且具有删除权限，就将显示模式设置为 Edit, 否则设置为 Disabled. 
• Tooltip = “Delete this item”   ---- 设置按钮的提示信息，其效果在于，在运行App时，如果把鼠标指针放在这个按钮的位置时，系统会自动显示出这里设定的提示信息。用来帮助App使用者了解这个图标的作用。如下图所示。

4、编辑按钮IconEdit1： 用来跳转到编辑页面。 按钮的主要属性设置为:

• OnSelect = EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)  ----点击按钮后执行两个动作，一是将表单EditForm1切换到编辑模式，二是切换到编辑页面EditScreen1。
• Icon = Icon.Edit   ---- 和上面一样， 用来设置图标样式 

未完。。。下一节将解析编辑页面EditScreen1。