桌面端布局类组件

在页面上通过拖放不同的布局组件，可以形成多种布局效果，下面介绍常见的几种布局方式

布局方式

流式布局

系统默认的布局方式，不需要专门的布局组件，超出一屏后，自动出现滚动条，如下图所示

多列布局

页面中的内容多列排布，整体页面还是流式布局，即超出一屏后，自动出现滚动条。

实现方法：

• 使用行列组件，保留两列
• 设置每列的 flex 布局属性或栅格占位格数
• 通过 flex 表示列宽比例
• 栅格占位格数的合计超过24会另起一行

充满布局

和前面两种流式布局不同，页面不会出现滚动条，在需要滚动的区域出现滚动条。系统提供“弹性布局”组件实现充满布局，如下图所示

系统提供“分割面板”，实现左右分栏，中间的分割线支持左右拖动，改变左右分栏的宽度。分割面板将页面分为左右两个部分，两个部分可以支持各自的布局方式，通常左边采用充满布局，右边采用流式布局或充满布局。如下图所示

实现充满布局

页面组件设置

页面 page 组件设置“自动充满”属性为“是”，表示页面高度自动充满

弹性布局组件设置

弹性布局组件的属性设置如下

• “主轴方向垂直”属性选择“是”，表示弹性布局组件中的组件垂直排列
• "自动充满模式"属性选择"第二个元素充满"，如下图所示，弹性布局组件中共有3个元素，分别是工具栏、表格和分页，表格就是第二个元素，这样设置后表格的高度会自动充满
• “间隙”属性选择“中”，表示每两个元素垂直方向上有16 px 的间距

表格组件设置

表格组件设置“纵向滚动高度”属性，实现表头固定效果。弹性布局组件提供 css 变量 --flex-auto-fill-size 表示自动充满区域的高度（主轴方向垂直时），用这个高度减去表格的表头高度、总结栏高度等，就是表格纵向滚动高度。例如默认大小的表格的表头高度是55 px，表格的纵向滚动高度为：

calc(var(--flex-auto-fill-size) - 55px)

设置表格的“纵向滚动高度”属性，如下图所示，注意字符串需要使用双引号括起来

实现左右分栏的充满布局

实现充满布局的方法和前面介绍的一样，只是在页面上先添加“分割面板”组件，在两个分割面板项中再添加“弹性布局”组件。

分割面板项的“高度样式”设置为充满，如下图所示

特别说明

• React 两个分割面板项的初始尺寸写宽度比例，例如左分割面板项的初始尺寸为1，右分割面板项的初始尺寸为2，实现左右宽度1:2的效果
• Vue 分割面板项的初始尺寸写百分数，例如33，另一个分割面板项的初始尺寸为空，实现左右宽度33:67的效果
• Antd 组件默认为流式布局，即组件的高度是由内部组件的高度撑出来的，设置 height:100% 也不起作用，弹性布局组件放在这种组件中也会失效

上面案例中使用了样式设置页面白色背景以及内边距，样式参考如下

    .css-glamorous-div--jgd0xx>div:first-child,//分割面板左分栏
    .css-glamorous-div--jgd0xx>div:last-child,//分割面板右分栏
    {
        background-color: var(--ant-color-bg-base);
        padding: 20px 24px;
    }

实现左充满右流式的布局

整个页面撑满，分为左右两部分。左边充满，右边超出一屏时滚动，如下图所示

上图右边出现滚动条，滚动后，只滚动右边，左边不滚动，滚动后效果如下图所示

实现方法：

• 设置页面组件的“自动充满”属性为是，实现整个页面撑满的效果
• 使用分割面板组件将页面分成左右两部分
• 左边分割面板项，设置“高度样式”为“充满”，添加弹性布局组件实现左边充满
• 右边分割面板项，设置“高度样式”为“滚动充满”

响应式布局

页面内容的在不同屏幕分辨率下，呈现出不同的排布。如下面两张图所示，不同的屏幕大小，一行显示的内容不同。注意这不是固定宽度后的水平流式布局，这是使用栅格系统，为6种屏幕大小设置的排布规则。

6种屏幕大小分别是：超小屏<576px、小屏>=576px、中屏>=768px、大屏>=992px、超大屏>=1200px、无限大屏>=1600px

使用行列组件实现响应式布局：

• 设置每列的不同屏幕大小下的“栅格占位格数”，如下图所示
• 不同的列可以设置不同的栅格占位格数，即列宽可以不同
• 一行的栅格格数是24，超过24后，另起一行排列
• 由于24除不尽5，不能均匀的显示5列

使用列表组件实现响应式布局：

• 在列表组件上设置“列表栅格配置”，如下图所示
• 列表中的每列宽度相同
• 不受24栅格的影响，列数支持任意整数

行列

行列组件用于实现一行多列，支持栅格布局和 flex 布局，运行效果如下图所示

行列组件支持

• 设置列之间的水平间距和垂直间距
• 设置列的响应式布局

如上图所示，一行分为4列，列之间有水平间距，当在小屏幕上显示时，一行显示两列，显示两行，这时有垂直间距。在行上设置间隔，包括水平间距和垂直间距，如下图所示

在列上设置响应式布局，如下图所示，栅格占位格数为24表示占满一行，不同的屏幕大小，设置不同的栅格占位格数，就是响应式布局

卡片

卡片组件用来提供背景色、内边距、标题和标题右侧扩展区域。卡片组件不设置标题，就不显示标题区。设置卡片的标题和右侧扩展区域的界面如下图所示

描述卡片

描述卡片提供一种支持头像、标题和描述信息的卡片，如下图所示

设计时，在卡片上点击添加描述卡片，如下图所示

在描述卡片上添加头像、描述内容和标题，如下图所示

描述列表

描述列表用于展示多个只读字段的组合。包括至少一个描述列表项，一个描述列表项包括一个标签和一个内容，可以左右显示，如下图所示，也可以上下显示

上图对应的页面结构如下图所示，标签里面放一个图片，描述列表项中的节点即为内容

对应的 w 源码如下

<antdpro:Descriptions bordered="true" column="1" id="descriptions0" labelStyle="width:100px;">
    <antdpro:Descriptions.Item id="descriptionsItem0" xmlns:antdpro="$UI/comp/antdpro/components">
        <attr:label d_canAddChild="true" id="default41" xmlns:attr="http://www.wex5.com/attr">
            <antdpro:Image height="80" id="image1" src="$UI/pcx/images/online1.png" width="80">
            </antdpro:Image>
        </attr:label>
        <antdpro:Div id="div4">
            <antdpro:Typography.Text id="typographyText8" text="正确数量条数：">
            </antdpro:Typography.Text>
            <antdpro:Typography.Text id="typographyText25" text="{pageData.current?.rightNum + "条"}" type="success">
            </antdpro:Typography.Text>
        </antdpro:Div>
        <antdpro:Div id="div5">
            <antdpro:Typography.Text id="typographyText9" text="异常数量条数：">
            </antdpro:Typography.Text>
            <antdpro:Typography.Text id="typographyText21" text="{pageData.current?.errorNum + "条"}" type="danger">
            </antdpro:Typography.Text>
        </antdpro:Div>
    </antdpro:Descriptions.Item>
</antdpro:Descriptions>

标签页

标签页组件提供显示多张选项卡以及互相切换的功能。包括标签栏、内容区和扩展区。标签页绑定数据集后实现动态标签页效果。

水平标签页

• “位置”属性设置为上（下），标签栏就显示在上（下）侧，实现水平标签页。
• “居中”属性设置为是，标签栏显示在中间。
• “类型”属性设置为卡片，标签栏显示为卡片样式，设计界面如下图所示

垂直标签页

“位置”属性设置为左（右），标签栏就显示在左（右）侧，实现垂直标签页

动态标签页

动态添加、删除标签页，运行效果如下图所示

动态添加标签页，添加标签栏容易，添加复杂的内容困难，因此动态添加的标签页通常用作展示相同的内容，只是其中的数据不同。本例动态添加的是商品分类页签，切换商品分类页签，刷新商品列表，显示不同商品分类下的商品。

准备标签页数据

添加一个自定义数据，作为标签页数据。添加键、标题、可关闭三列，如下图所示

在标签页数据中，添加固定页签的数据，如下图所示

标签页设置列表

在标签页组件上设置列表

列表绑定“标签页数据”

在“标签项”上，将键、标题、关闭等属性绑定“标签页数据”的对应列

设置标签页

标签页属性设置如下

• type：必须，设置标签页为可编辑的卡片风格 editable-card
• hideAdd：隐藏添加按钮
• onChange：切换选项卡时触发，在这个事件中获取当前选项卡的 key 值，可用于过滤数据
• onEdit：删除标签页时触发，在这个事件中从标签页数据中删除指定标签栏的数据，删除后调用 setActiveTab 方法重新指定激活页

切换选项卡时，存储 activeKey 用于控制选项卡内容是否显示，也用 activeKey 作为过滤条件，获取对应的数据，代码如下：

    onTabs1Change = ({ activeKey }) => {
        this.comp("pageData").setValue("activeKey", activeKey);
        this.comp("productData").refreshData();
    }

固定页签的选项卡的内容放在不同的区块 div 中，每个区块通过“动态隐藏”属性 bind:hidden 控制何时显示，例如当前选项卡的 key 值等于 aa 时，显示 div0 这个区块，源码如下：

    <antdpro:Div bind:hidden="wx.Util.iif(pageData.current?.activeKey=="aa",false,true)" id="div0" >
        <antdpro:Button id="button0" text="按钮" >
        </antdpro:Button>
    </antdpro:Div>

添加选项卡就是给“标签页数据”增加数据，增加数据后，页签自动增加，示例代码如下：

    onAddTabBtnClick = ({row}) => async (event) => {
        await this.comp("tabsData").newData({defaultValues:[{
            "key":row.fid,
            "label":row.name
        }]});
    }

删除选项卡就是删除“标签页数据”中的数据，删除数据后，页签自动删除。注意一定要调用 event.preventDefault(); 方法取消组件的默认行为，还需通过 setActiveTab 方法指定激活页，示例代码如下：

    onTabs1Edit = (event) => {
        let {detail:{action, targetKey}} = event;
        if (action === 'remove') {
            this.comp("tabsData").deleteData(targetKey,{confirm:false});
        }
        event.preventDefault();//取消默认行为
        this.comp("tabs1").setActiveTab({activeKey:"bb"});//切换到固定二
    }

自定义标签

标签页组件的标签允许定制，运行效果如下图所示

上图中的“转化率”（文本、进度条）通过定制标题实现，选中标签项，定制标题，设计界面如下图所示

在标题里放行列、文本、进度条组件，如下图所示

组件属性

隐藏时渲染

打开页面时默认只渲染激活的标签项，其它标签项在被激活时渲染，标签项未渲染时，其中的组件未创建，不能访问。标签项提供“隐藏时渲染”属性，设置为 true，打开页面时会渲染该标签项，并创建其中的组件。

组件方法

激活标签项

组件提供 setActiveTab 方法激活标签项

方法：
    setActiveTab（JSON activeKey）
参数：
    {
        activeKey：标签项的键，如下图所示
    }

示例代码如下：

react 代码

this.comp("tabs0").setActiveTab({"activeKey":"tabsTabPane1"});

vue 代码

$page.comp("tabs0").setActiveTab({"activeKey":"tabsTabPane1"});

分割面板

分割面板组件用于切分指定区域，支持垂直切分、水平切分，支持组件嵌套，支持拖拽分割线，运行效果如下图所示

react 组件属性

分割面板组件由分割面板项组件组成，它们有各自的属性

react 分割面板组件使用 react-split-pane 组件，详情参考 https://github.com/tomkp/react-split-pane

vue 组件属性

分割面板组件由分割面板项组件组成，它们有各自的属性

vue 分割面板组件使用 splitpanes 组件，详情参考 https://gitcode.com/gh_mirrors/sp/splitpanes

固钉

固钉组件用于将页面元素钉在可视范围。与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部或底部。也支持固定在局部区域内，运行效果如下图所示

组件属性说明如下

• 顶部偏移量：设置距离顶部的距离，如果没有设置底部偏移量，会固定在顶部
• 底部偏移量：设置距离底部的距离，设置后固定在底部
• 滚动目标元素：固定在目标元素内

固定在目标元素内

• react 做法

在 w 文件中，使用 div 元素作为目标元素，增加 ref 属性，将 js 中创建的 ref 对象与 DOM 元素关联，代码如下

<div id="div1" ref="{$page.divRef}" style="overflow:scroll;height:300px;background-color:rgba(248,231,28,0.22);">
    <antdpro:Affix id="affix2" target="{$page.affix2TargetFn()}">
        <antdpro:Button id="button2" text="局部区域固定在顶部" xmlns:antdpro="$UI/comp/antdpro/components"/>
    </antdpro:Affix>
    <antdpro:Div id="div2" style="height:500px;background-color:rgba(248,231,28);">
    </antdpro:Div>
</div>

在 js 文件的构造函数中，使用 createRef() 方法创建一个 ref 对象，通过 ref 对象的 current 属性，可以访问到关联的 DOM 元素，代码如下

import Page from "$UI/wxsys/comps/reactContainer/page/Page";
import {createRef} from "react";
export default class IndexPage extends Page {
    constructor(props, context) {
        super(props, context);
        this.divRef = createRef();
    }

    affix2TargetFn = () => {
        return this.divRef.current;
    }
}

• vue 做法

在 w 文件中，使用 div 元素作为目标元素，增加 ref 属性，将 js 中创建的 ref 对象与 DOM 元素关联，代码如下

<div id="div1" ref="{divRef}" style="overflow:scroll;height:300px;background-color:rgba(248,231,28,0.22);">
    <antdv:Affix id="affix2" target="{affix2TargetFn()}">
        <antdv:Button id="button2" text="局部区域固定在顶部">
        </antdv:Button>
    </antdv:Affix>
    <antdv:Div id="div2" style="height:500px;background-color:rgba(248,231,28);">
    </antdv:Div>
</div>

在 js 文件中，使用 ref() 方法创建一个 ref 对象，通过 ref 对象的 value 属性，可以访问到关联的 DOM 元素，代码如下

import { reactive, ref, watch } from "vue";
import { usePage, useData } from "vue_addon/core";
let $page = usePage();
let divRef = ref();

let affix2TargetFn = () => {
    return divRef.value;
}

锚点

锚点组件用于跳转到页面指定位置，运行效果如下图所示

在锚点组件中添加链接，在锚点链接中还可以再添加链接，形成树形结构

锚点链接属性说明如下

• 文本：链接显示的文本
• 链接：点击链接跳转的位置，使用 #id 跳转到当前页面的指定位置

上图中 #plumDiv 指的是 id 为 plumDiv 的组件

布局组件

系统提供的布局组件如下表所示，其中高级卡片、高级卡片组、多选卡片和多选卡片组只在 React 桌面端里。

案例位置

桌面-页面-页面布局-*.w