[通用]手机重布局

编辑
  • 文档创建者:susie
  • 浏览次数:6511次
  • 编辑次数:23次
  • 最近更新:Kevin-s 于 2019-06-07
  • 1. 版本

    设计器版本    移动端版本
      10.0  App10.0

    2. 场景

    由于手机屏幕比 PC 和 Pad 端小,因此针对下述三种场景时的模板制作中,手机端需要不同的布局功能。

    • 场景一:做好的决策报表含报表块等组件,在 PC 和 Pad 以及手机上共用,在 PC 和 Pad 端都是宽高自适应屏幕或者宽高等比例缩放,但是在手机上没有太大的布局要求,只需要在手机上面流式布局展现,即一行一个组件这种情况。

    • 场景二:在手机上也采用原始布局,PC 上想要和手机上共用一套模板,模板设计的时候建议以移动端效果为先。

    • 场景三:在手机上采用原始布局,为手机专门制作的模板。

    针对上述场景,场景一需要手机重布局,而场景二、三则需要手机不重布局。


    3. 功能

    在移动端支持重布局和保留布局两种模式。

    注意:重布局属性是决策报表的整体属性,只有当前控件选择 body 的时候才会有手机重布局属性,设置后是对整个决策报表进行生效的,如果决策报表内部有绝对布局或者 Tab 组件,那么里面的控件也是重布局显示。


    4. 示例

    模板在 PC 端显示的布局如下图:



    4.1 保留布局

    设置手机不重布局时,手机端按照 PC 端的布局方式显示,设置方式如下图:


    效果如下图:




    4.2 手机重布局

    设置手机重布局时,手机上面流式布局展现,即一行一个组件这种情况,设置方式如下图:

    注:默认重布局


    效果如下图:





    4.3 图表块缩小逻辑设置

    当手机重布局被勾选时,可单独对图表块进行缩小逻辑的设置,如下所示:

    注:功能的作用是为了在默认效果下看起来很高或者很矮的图表,通过等比例让其大小更合理。


    1)自动匹配

    默认状态下为自动匹配,即系统根据模板自动匹配缩小逻辑,如下:



    2)等面积自适应

    保持面积相等,横向压缩,纵向放大,但最大高度为屏幕显示区域的80%

    注:适用于在手机默认逻辑下太矮,可以通过设置等面积让它更合理。


    3)等比例自适应

    保持宽高比例不变,等比例的进行缩小,如下:


    注:适用于图表在手机默认逻辑下太高,可以通过设置等比例让它更合理。


    4. 具体逻辑

    4.1 手机上设置重布局

     手机上设置重布局时,组件缩放属性不影响组件的显示

    • a. 手机重布局时,一行一个组件

    • b. 手机重布局时,文本、数字、下拉框、下拉复选框、日期这些控件,固定高度显示

    • c. 手机重布局时,报表块主体内容的高度根据数据自适应,没有最小高度,有 最大高度 限制,可以通过开关控制是否启用报表最大高度限制,且

    最大高度可以自定义。

    • d. 手机重布局时,图表组件默认自适应逻辑如下:

      • # 如果原始宽度小于等于手机宽度,则等比例放大到宽度充满

      • # 如果原始宽度大于手机宽度:

      • 图表宽度>高度,则以面积相等为原则,宽度压缩充满,有 最大高度 限制

      • 图表宽度<高度,则宽高比缩放

        图表可单独设置缩放属性,默认为自动匹配,也可设置等面积自适应和等比例自适应。

    4.2 手机上采用原布局

    手机上采用原布局时,根据决策报表主体的组件缩放属性采用不同策略

    • a. 手机采用原布局,决策报表主体组件缩放属性设置为双向自适应

      •    # 组件的宽高分别按照显示区域的宽高进行分配

      •    # 分配后,对于文本、数字、下拉框、下拉复选框、日期这些控件,控件高度固定,如果控件高度<组件高度,则多余部分为空白;如果控件

        高度>组件高度,则控件显示部分(该情况时需用户在设计器中调整高度)

    • b.手机采用原布局,决策报表主体组件缩放属性设置为横向自适应

      • b.1、除了一行上只有一个报表块以外,例如左右有好几个组件等,组件按照设计宽高比进行自适应

      • b.2、对于文本、数字、下拉框、下拉复选框、日期这些控件,控件高度固定,如果控件高度<组件高度,则多余部分为空白;如果控件高度>组

        件高度,则控件显示部分(该情况时需用户在设计器中调整高度)

      • b.3、当一个报表块占一行的时候,按照 3.1-d 的逻辑自适应显示

      • b.4、报表组件内部报表高度还是会受设置的报表块 最大高度 限制影响


    附件列表


    主题: 移动端应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]