Skip to main content

分段控制器

分段控制器（Segmented）以紧凑的分段选项在多个内容区之间切换，比 Tab 容器更轻量，适合选项较少、强调快速切换的场景。

概述​

将「分段控制器」拖入画布后，默认生成两个分段（Segment1、Segment2）。在属性抽屉中可以：

  • 设置分段控件的尺寸、形状与对齐方式。
  • 新增、删除分段并拖拽排序，编辑分段标题、选择分段图标。
  • 通过星标设置默认激活的分段。
  • 绑定数据源接口，由接口动态决定展示哪些分段、其顺序与标题。

每个分段内部是一个布局列，可将任意组件拖入分段内容区。

只渲染激活分段

页面运行时仅渲染当前激活的分段内容，失活分段不会发起数据请求。

配置项​

配置项说明
尺寸分段控件尺寸：大 / 中 / 小，默认「中」
形状分段控件形状：默认 / 圆形
对齐方式分段控件的位置：左对齐 / 右对齐 / 居中对齐 / 填充
配置分段以列表方式管理分段：拖拽排序、编辑标题、选择图标、设为默认、删除、新增
数据源接口选择一个「组件数据源」类型的平台接口；配置后，分段展示与排序、标题由接口返回值决定

数据源接口​

「数据源接口」用于动态控制分段，行为与 Tab 容器 一致：

  1. 接口返回的分段顺序与集合决定实际渲染的分段。
  2. 接口返回的标题会覆盖用户配置的分段标题；分段图标仅由用户静态配置，不从接口获取。
  3. 默认激活分段的优先级为：URL 参数 / 本地缓存 > 接口返回 > 用户配置的默认分段。

CmpId 必须与布局中分段子节点（列节点）的 id 对应，否则该分段不会被渲染。

使用建议​

  1. 分段控制器适合 2 ~ 4 个平级视图的快速切换（如「全部 / 进行中 / 已完成」）。
  2. 选项较多或标题较长时，优先使用 Tab 容器 以获得更好的可读性。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索，说明分段控制器的属性、子节点结构与存储格式。

属性表​

属性名类型含义取值/存储值
Sizestring分段尺寸large / middle（默认） / small
Shapestring分段形状default（默认） / round
Alignmentstring分段对齐方式left（默认） / center / right / block
DefaultActiveSegmentstring(GUID)默认激活分段子节点（分段，即列节点）的 id；未配置时取第一个子节点
DefaultActiveCmpstring(GUID)运行态默认激活组件子节点 id，参与运行态默认激活优先级计算
MetaInterfaceIdstring(GUID)组件数据源接口 ID平台接口（标签为组件数据源）ID

Segmented 节点固定信息：uid = "c1f2a3b4-5c6d-7e8f-9a0b-1c2d3e4f5a6b"，widgetType = "Segmented"，widgetTypeName = "分段控制器"，dragType / originalType 均为 Widget。

Alignment 的渲染语义：left / center / right 分别使分段控件在容器内左 / 中 / 右对齐，block 使其拉伸填满整行宽度。

子节点属性表​

Segmented 的子节点固定为布局列（widgetType = "Column"，固定 uid = "7b9a905e-83d4-452b-83c8-694a3e0935e3"），其 meta 中：

属性名类型含义取值/存储值
Titlestring分段标题展示文本；缺省时编辑器按 Segment{序号} 兜底
Iconstring分段图标图标标识，仅由用户静态配置，不从数据源接口获取

Segmented 节点存储示例​

{
  "id": "6c2a2b1a-3000-4a01-8f10-000000000030",
  "uid": "c1f2a3b4-5c6d-7e8f-9a0b-1c2d3e4f5a6b",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "Segmented",
  "widgetTypeName": "分段控制器",
  "meta": {
    "Size": "middle",
    "Shape": "default",
    "Alignment": "left",
    "DefaultActiveSegment": "6c2a2b1a-3000-4a01-8f10-000000000031"
  },
  "children": [
    {
      "id": "6c2a2b1a-3000-4a01-8f10-000000000031",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Icon": "",
        "Title": "Segment1"
      },
      "children": []
    },
    {
      "id": "6c2a2b1a-3000-4a01-8f10-000000000032",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "Icon": "",
        "Title": "Segment2"
      },
      "children": []
    }
  ]
}

在页面布局中的位置​

Segmented 的 dragType 为 Widget，可放在页面顶层，也可放入任意布局列中：

{
  "Layout": [
    { "widgetType": "Segmented", "children": [] },
    { "widgetType": "Row", "children": [ { "widgetType": "Column", "children": [ { "widgetType": "Segmented", "children": [] } ] } ] }
  ]
}

相关接口​

接口说明
POST /api/MetaPage/SaveLayout保存页面布局