[通用]单选按钮组移动端按钮组样式

1.1 版本

1.2 功能简介

移动端模板中，单选按钮组可以帮助用户展示多维度数据，但是样式过于单一。

通过设置「单选按钮组控件」移动专属样式，例如「联排按钮」、「胶囊按钮」、「图文按钮」等。

2.1 使用场景

该样式设置仅对移动端模板生效，支持 APP 和 HTML5 端。

2.2 操作方法

1）在 FineReport 设计器中打开一张决策报表，在控件面板中拖动「单选按钮组控件」到模板中。

2）在右侧属性面板「控件设置」中，若选中「radioGroup0」，在「校验」下不勾选「允许为空」按钮，移动端预览时重复点击同一个 Tab ，效果不变。如下图所示：

3）在右侧属性面板中为「单选按钮组控件」添加数据字典，并设置控件默认值。如下图所示：

4）在右侧属性面板控件设置中，选中「radioGroup0」，点击「移动端」，可在「样式模板」处设置「单选按钮组控件」的样式。如下图所示：

5）如果按钮显示多行，可通过高级中的「最大显示行数」控制行数。如下图所示：

6）设置条件属性，实现报表内容跟随按钮切换。

2.3 按钮样式

2.3.1 默认

选中「默认」，用户可设置「自定义」按钮效果，移动端效果（以 APP 效果为例）如下图所示：

2.3.2 联排按钮

选中「联排按钮」，可设置「联排按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：

「联排按钮」各设置项说明如下表所示：

2.3.3 胶囊按钮

选中「胶囊按钮」，可设置「胶囊按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：

「胶囊按钮」各设置项说明如下表所示：

2.3.4 图文按钮

选中「图文按钮」，可设置「图文按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：

「图文按钮」各设置项说明如下表所示：

本文示例：决策报表下有三个报表块，新增联排样式的单选组按钮，点击按钮时，实现报表块跟随按钮切换。

点击下载示例决策报表：示例决策报表.frm

3.1 添加单选按钮组控件

1）在 FineReport 设计器中打开示例决策报表，在控件面板中拖动「单选按钮组控件」到模板中。

2）在右侧属性面板中，选中「radioGroup0」，在「校验」下不勾选「允许为空」按钮，实现移动端预览时重复点击同一个 Tab 的效果不变。如下图所示：

3.2 添加数据字典

选中「radioGroup0」，在「属性>高级>控件值」处，设置控件默认值为 1 ，默认选择品牌分析按钮。

设置「单选按钮组控件」的数据字典。类型设置选择「自定义」，包括三种按钮：品牌分析、店铺分析、会员分析。如下图所示：

3.3 选择按钮样式

在右侧属性面板中，选中「radioGroup0」，点击「移动端」，在「样式模板」处进行选择和设置。

选中「联排」，设置「联排按钮」各属性项，如下图所示：

3.4 设置条件属性

当点击某一按钮时，可通过条件属性将其他两个报表块的行高设置为0，实现只显示当前按钮对应的报表块。具体设置如下：

1）双击报表块 report1，进入报表块编辑界面，合并第 H 列单元格。

选中第 H 列，在右侧属性页面添加一个条件属性，当满足公式$radioGroup0 = 2 or $radioGroup0 = 3时，行高为0。实现当按钮值为 1 时，显示报表块 report1 。

设置完成后，右击隐藏第 H 列。

2）双击报表块 report2，进入报表块编辑界面，合并第 J 列单元格。

选中第 J 列，在右侧属性页面添加一个条件属性，当满足公式$radioGroup0 = 1 or $radioGroup0 = 3时，行高为0。实现当按钮值为 2 时，显示报表块 report2 。

设置完成后，右击隐藏第 J 列。

3）双击报表块 report3，进入报表块编辑界面，合并第 J 列单元格。

选中第 J 列，在右侧属性页面添加一个条件属性，当满足公式$radioGroup0 = 1 or $radioGroup0 = 2时，行高为0。实现当按钮值为 3 时，显示报表块 report3 。

设置完成后，右击隐藏第 J 列。

3.5 效果预览

移动端预览模板效果如下图所示：

3.6 已完成模板

点击下载已完成模板：单选按钮组样式示例模板.frm

手机重布局 对单选按钮组的显示效果有明显影响。如下图所示：

• 勾选手机重布局：控件自适应，一行一个控件，并可设置控件的布局和显示顺序。

• 不勾选手机重布局：控件显示区域取决于模板中组件大小。若文字显示不下，则截断。