{
  "state": {
    "values": {
      "totalCount": 20,
      "countPerLine": 3,
      "maxCountPerLine": 3
    }
  },
  "styles": {
    "button": {
      "width": 20,
      "height": 20,
      "font-style": "bold",
      "title-color": {
        "normal": "#E24810",
        "highlighted": "white",
        "disabled": "#aaa"
      },
      "background-image": {
        "normal": "white",
        "highlighted": "#E24810"
      },
      "clip": true,
      "border-width": 1,
      "border-color": "#E24810",
      "corner-radius": 3
    }
  },
  "layout": {
    "vars": {
      "values": {
        "totalCount": "${state.values.totalCount}",
        "countPerLine": "${state.values.countPerLine}",
        "maxCountPerLine": "${min(state.values.countPerLine, state.values.maxCountPerLine)}"
      },
      "controls": [
        {
          "text": "元素个数",
          "var": "totalCount",
          "min": 0,
          "max": 100
        },
        {
          "text": "每行个数",
          "var": "countPerLine",
          "min": 1,
          "max": 20
        },
        {
          "text": "每行最大个数",
          "var": "maxCountPerLine",
          "min": 0,
          "max": "${state.values.countPerLine}"
        }
      ]
    },
    "style": {
      "direction": "vertical",
      "height": "${_height_ - 44 - screen.statusBarHeight - screen.safeArea.bottom}"
    },
    "children": [
      {
        "repeat": "${controls.count}",
        "vars": {
          "item": "${controls[_index_]}"
        },
        "style": {
          "background-color": "#ddd",
          "padding-left": 10,
          "padding-top": 4,
          "padding-bottom": 4
        },
        "children": [
          {
            "type": "text",
            "style": {
              "width": 90,
              "alignment": "right",
              "text": "${item.text}",
              "color": "#666",
              "margin-right": 8
            }
          },
          {
            "type": "button",
            "class": "button",
            "style": {
              "title": "−",
              "properties": {
                "enabled": "${values[item.var] > item.min}"
              }
            },
            "on-tap": {
              "updateState:": {
                "values": "${item.var == 'countPerLine' ? values.set_value(item.var, values[item.var] - 1).set_value('maxCountPerLine', values[item.var] - 1) : values.set_value(item.var, values[item.var] - 1)}"
              }
            }
          },
          {
            "type": "text",
            "style": {
              "text": "${values[item.var]}",
              "width": 30,
              "alignment": "center"
            }
          },
          {
            "type": "button",
            "class": "button",
            "style": {
              "title": "+",
              "properties": {
                "enabled": "${values[item.var] < item.max}"
              }
            },
            "on-tap": {
              "updateState:": {
                "values": "${item.var == 'countPerLine' ? values.set_value(item.var, values[item.var] + 1).set_value('maxCountPerLine', values[item.var] + 1) : values.set_value(item.var, values[item.var] + 1)}"
              }
            }
          }
        ]
      },
      {
        "vars": [
          {
            "spacing": 7
          },
          {
            "itemSize": "${(_width_ - 20 - spacing * (values.countPerLine - 1)) / state.values.countPerLine}"
          }
        ],
        "type": "scroll",
        "style": {
          "flex-grow": 1,
          "scroll-direction": "vertical",
          "clip": true,
          "padding": 10,
          "spacing": "${spacing}",
          "line-spacing": "${spacing}",
          "wrap": "wrap",
          "items-per-line": "${values.maxCountPerLine}",
          "background-color": "white",
          "margin-bottom": "${-screen.safeArea.bottom}",
          "padding-bottom": "${screen.safeArea.bottom + 10}"
        },
        "children": [
          {
            "repeat": "${values.totalCount}",
            "type": "text",
            "style": {
              "width": "${itemSize}",
              "height": "${itemSize}",
              "background-color": "#bbb",
              "text": "${_index_ + 1}",
              "color": "white",
              "font-size": 20,
              "alignment": "center"
            }
          }
        ]
      }
    ]
  }
}