示例：设置视图样式
此示例显示了如何对个别视图进行样式设置以根据用户在网页上还是移动设备上查看视图来更改视图外观。
此示例包含两组相同的 UI 视图，用于展示如何将相同视图的样式设置为不同的外观。 在第一组中，部分样式配置针对网页的视图进行了优化。 对第二个组进行的部分样式配置针对移动设备（例如，智能手机）对其进行了优化。
示例中的样式配置使用了“典型”主题中的定义。 这些定义控制使用该主题的任何视图的外观。 如果您的视图使用其他主题，那么根据两种主题之间的差异，这些视图的外观将有所不同。
- 打开 Process Designer 并创建视图，然后向其添加以下 UI 视图:
- 文本
- 复选框
- 按钮
- 文本
- 开关
- 按钮
视图如下所示：
- 选择第一个“文本”视图。 在其 外观 配置属性中，将文本大小设置为 Small。 虽然 Medium 的缺省大小很好，但较小的文本允许您在保留空间的同时在屏幕上拥有更多文本。 进行更改时，标签文本会缩小。 如果添加了占位符文本，那么“文本”视图内的文本也会缩小。 除更改文本大小之外，视图周围的填充也会更改。 您可以通过观察布局中的两种“文本”视图来查看小文本和中文本之间的差异。
- 对第一个按钮进行相同的更改，将文本大小更改为 Small。
- 选择第二个“文本”视图。 在其配置属性中，展开 "样式" 部分，并将文本大小更改为 Large。 较大的文本在智能手机上更便于阅读。 但是，您可以根据自己的布局设计需要在网页中使用较大的文本，而在智能手机上使用较小的文本。
- 选择“开关”视图。 在其配置属性中，展开 "样式" 部分，并将文本大小更改为 Large。
- “开关”视图使用颜色来指示选中哪个部分。 缺省情况下，此颜色为主颜色，“典型”主题将主颜色定义为深蓝色。 将 切换颜色 属性更改为 Info ，以将其更改为 经典 主题定义为浅蓝色的信息颜色。 在此情况下，这只是一个外观选项。 但是，您可选择基于视图的用途（作为“信息”视图、“成功”视图、“警告”视图或“危险”视图）来设置视图的颜色。
- 选择第二个“按钮”视图。 在其配置属性中，展开 "样式" 部分，将文本大小更改为 Large ，并将主题颜色类型设置为 Success。 在布局中，视图如下所示：
此示例使用了两组不同的视图来演示如何在一个按钮实例上设置样式而不影响其他实例。 但是，如果要将此视图创建为可在桌面浏览器中和移动应用程序中使用的 UI，可以仅使用一组视图。 在这种情况下，请将布局设置为大屏幕大小 
，然后将视图的文本大小设置为小。 然后，将布局设置为小屏幕大小 
，并将视图的文本大小设置为大。 请注意，当屏幕大小发生更改时，颜色配置选项不会更改。 即，无论屏幕尺寸如何，含成功颜色的按钮的颜色就是该颜色。 以下截屏显示了一组根据屏幕大小而更改的视图：
，然后将视图的文本大小设置为小。 然后，将布局设置为小屏幕大小 ，并将视图的文本大小设置为大。 请注意，当屏幕大小发生更改时，颜色配置选项不会更改。 即，无论屏幕尺寸如何，含成功颜色的按钮的颜色就是该颜色。 以下截屏显示了一组根据屏幕大小而更改的视图：| 大屏幕 | 小屏幕 |
|---|---|
 |
 |