1. 概述
1.1 版本
| 报表服务器 | JAR 包 | App 版本 | 插件名称 | 插件版本 |
|---|---|---|---|---|
| 10.0 | 2019-12-08 | 10.4.49 | HTML5移动端展现插件 | V10.4.49 |
| 单选按钮组移动端按钮组样式插件 | V10.4.49 |
1.2 功能简介
移动端模板中，单选按钮组可以帮助用户展示多维度数据，但是样式过于单一。
通过安装「单选按钮组移动端按钮组样式」插件，设置单选按钮组移动专属样式，例如联排按钮、胶囊按钮、图文按钮等。
2. 插件介绍
2.1 使用场景
该插件仅对决策报表中body内的单选按钮组组件生效。
该插件仅对移动端模板生效，支持 APP 和 HTML5 端。
2.2 插件安装
插件下载：
插件下载请点击：单选按钮组移动端按钮组样式插件
设计器插件安装方法请参见：设计器插件管理
服务器安装插件方法请参见：服务器插件管理
2.3 操作方法
1）在 FineReport 设计器中打开一张决策报表，在控件面板中拖动「单选按钮组控件」到模板中。
2）若App版本为 10.4.69 及之后，HTML5移动端展现插件版本为 V10.4.69 及之后，在右侧属性面板控件设置中，选中「radioGroup0」，在「校验」下不勾选「允许为空」按钮，移动端预览时重复点击同一个 Tab ，效果不变。如下图所示：
3）在右侧属性面板中为「单选按钮组控件」添加数据字典，并设置控件默认值。如下图所示：
4）在右侧属性面板控件设置中，选中「radioGroup0」，点击「移动端」，可在「样式模板」处设置「单选按钮组控件」的样式。如下图所示：
5）设置条件属性，实现报表内容跟随按钮切换。
2.4 按钮样式
2.4.1 默认
选中「默认」，用户可设置「组件背景」，移动端效果（以 APP 效果为例）如下图所示：
2.4.2 联排按钮
选中「联排按钮」，可设置「联排按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：
「联排按钮」各设置项说明如下表所示：
| 属性 | 备注 | |
|---|---|---|
| 组件背景 | 组件的背景，默认透明 | |
| 控件边距 | 控件边框到组件边框的距离，上下左右均可设置； 默认上下边距为 15px，左右边距为 0px | |
| 按钮背景 | 可设置按钮初始背景和选中后的背景 | |
| 按钮边框 | 可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小 | |
| 按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 | |
2.4.3 胶囊按钮
选中「胶囊按钮」，可设置「胶囊按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：
「胶囊按钮」各设置项说明如下表所示：
| 属性 | 备注 | |
|---|---|---|
| 组件背景 | 组件的背景，默认透明 | |
| 控件边距 | 控件边框到组件边框的距离，上下左右均可设置 默认上下边距为 15px，左右边距为 0px | |
| 按钮排布 | 左对齐 | 按钮组不横向充满，左端对齐
|
| 两端对齐 | 按钮组横向充满
| |
| 按钮背景 | 可设置按钮初始背景和选中后的背景 | |
| 按钮边框 | 可设置按钮边框的线型、初始颜色、选中后的颜色、圆角大小 | |
| 按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 | |
2.4.4 图文按钮
选中「图文按钮」，可设置「图文按钮」各属性项。移动端效果（以 APP 效果为例）如下图所示：
「图文按钮」各设置项说明如下表所示：
| 属性 | 备注 |
|---|---|
| 组件背景 | 组件的背景，默认透明 |
| 控件边距 | 控件边框到组件边框的距离，上下左右均可设置 默认上下边距为 15px，左右边距为 0px |
| 图标 | 可设置初始图标和选中后的图标 支持上传自定义图片 |
| 按钮字符 | 可设置按钮中字符的字体大小、初始颜色和选中后的颜色 |
3. 示例
本文示例：决策报表下有三个报表块，新增联排样式的单选组按钮，点击按钮时，实现报表块跟随按钮切换。
点击下载示例决策报表：示例决策报表.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
4. 注意事项
手机重布局 对单选按钮组的显示效果有明显影响。如下图所示：
勾选手机重布局：控件自适应，一行一个控件，并可设置控件的布局和显示顺序。
不勾选手机重布局：控件显示区域取决于模板中组件大小。若文字显示不下，则截断。