如何在Spotify Backstage模板中配置网格布局表单字段？

可以通过自定义template.yaml文件实现表单的网格布局，Backstage模板引擎支持通过ui:options配置项控制字段的布局位置，核心是利用内置的12列网格系统分配列宽。

实现步骤与示例 #

在模板的parameters区块中，为需要同行显示的字段添加ui:options.grid.column配置，指定该字段占用的列数（总和不超过12即可放在同一行）：

parameters:
  - title: 基础服务信息
    required:
      - serviceName
      - owner
      - repoUrl
    properties:
      serviceName:
        title: 服务名称
        type: string
        ui:options:
          grid:
            column: 6  # 占6列，与下一字段平分一行
      owner:
        title: 负责人
        type: string
        ui:options:
          grid:
            column: 6
      repoUrl:
        title: 仓库地址
        type: string
        ui:options:
          grid:
            column: 4  # 占4列，一行可放3个同宽度字段
      devLanguage:
        title: 开发语言
        type: string
        enum: [JavaScript, Python, Java]
        ui:options:
          grid:
            column: 4
      framework:
        title: 技术框架
        type: string
        ui:options:
          grid:
            column: 4

额外配置说明 #

• 未设置grid.column的字段默认占12列（整行宽度）
• 可通过grid.row强制字段换行，例如给某个字段设置grid.row: 2，会让它直接跳到第二行显示
• 列数分配灵活，比如可以设置一个字段占8列，另一个占4列，实现非对称布局

内容的提问来源于stack exchange，提问作者Eric Broda