分段控制器

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

概述

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

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

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

只渲染激活分段

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

配置项

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

数据源接口

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

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

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

使用建议

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

下一步

Tab 容器 - 页签式内容切换
Step 容器 - 步骤式内容切换
基础容器 - 返回布局容器说明

属性明细

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

属性表

属性名	类型	含义	取值/存储值
`Size`	string	分段尺寸	`large` / `middle`（默认） / `small`
`Shape`	string	分段形状	`default`（默认） / `round`
`Alignment`	string	分段对齐方式	`left`（默认） / `center` / `right` / `block`
`DefaultActiveSegment`	string(GUID)	默认激活分段	子节点（分段，即列节点）的 `id`；未配置时取第一个子节点
`DefaultActiveCmp`	string(GUID)	运行态默认激活组件	子节点 `id`，参与运行态默认激活优先级计算
`MetaInterfaceId`	string(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 中：

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

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": [] } ] } ] }
  ]
}

概述​

配置项​

数据源接口​

使用建议​

下一步​

属性明细​

属性表​

子节点属性表​

Segmented 节点存储示例​

在页面布局中的位置​

相关接口​

概述

配置项