使用Python从零打造一个拖拽式表单设计器

pip install wxPython

MainFrame（主窗口）
├── ToolboxPanel       # 左侧组件工具箱（触发拖拽）
├── DesignCanvas       # 中间设计画布（接收拖放、绘制组件）
├── PropsPanel         # 右侧属性面板（编辑选中组件）
├── WidgetData         # 数据模型（每个组件的状态）
└── PreviewFrame       # 运行预览窗口（生成真实控件）

class WidgetData:
    def __init__(self, wtype, x, y, w=None, h=None, label=None, props=None):
        self.wtype = wtype      # 组件类型，如 "TextCtrl"
        self.x, self.y = x, y  # 画布坐标
        self.w, self.h = w, h  # 宽高
        self.label = label      # 显示名称
        self.props = props      # 类型特定属性（字典）

def on_btn_drag(self, evt):
    data = wx.TextDataObject(btn.wtype)  # 例如 "TextCtrl"
    src = wx.DropSource(btn)
    src.SetData(data)
    src.DoDragDrop(wx.Drag_DefaultMove)

class CanvasDropTarget(wx.DropTarget):
    def OnData(self, x, y, result):
        self.GetData()
        wtype = self.data.GetText()
        ux, uy = self.canvas.CalcUnscrolledPosition(x, y)
        self.canvas.add_widget(wtype, ux, uy)
        return result

def on_paint(self, evt):
    dc = wx.BufferedPaintDC(self)
    self.DoPrepareDC(dc)  # 处理滚动偏移
    dc.Clear()
    # 绘制网格
    for x in range(0, width, 20):
        dc.DrawLine(x, 0, x, height)
    # 绘制所有组件
    for cw in self.widgets:
        cw.draw(dc)

def hit_test(self, x, y):
    # 优先检测右下角缩放手柄
    if handle_rect.Contains(x, y):
        return "handle_SE"
    # 再检测组件主体
    if body_rect.Contains(x, y):
        return "body"
    return None

def on_motion(self, evt):
    dx = ux - self.drag_start[0]
    dy = uy - self.drag_start[1]
    if self.drag_mode == "move":
        d.x = max(0, orig_x + dx)
        d.y = max(0, orig_y + dy)
    elif self.drag_mode == "resize":
        d.w = max(40, orig_w + dx)
        d.h = max(20, orig_h + dy)
    self.Refresh()

def get_config(self):
    return {
        "widgets": [cw.data.to_dict() for cw in self.widgets]
    }

# 保存
with open(path, "w", encoding="utf-8") as f:
    json.dump(cfg, f, ensure_ascii=False, indent=2)

{
  "wtype": "TextCtrl",
  "x": 120,
  "y": 80,
  "w": 200,
  "h": 30,
  "label": "用户名",
  "props": {
    "value": "",
    "placeholder": "请输入用户名..."
  }
}

def load_config(self, cfg):
    self.widgets.clear()
    for d in cfg.get("widgets", []):
        wd = WidgetData.from_dict(d)
        self.widgets.append(CanvasWidget(wd))
    self.Refresh()

for cw in widgets:
    d, p = cw.data, cw.data.props
    if d.wtype == "TextCtrl":
        wx.TextCtrl(panel, value=p["value"], pos=(d.x, d.y), size=(d.w, d.h))
    elif d.wtype == "ComboBox":
        choices = p["choices"].split("\n")
        wx.ComboBox(panel, choices=choices, pos=(d.x, d.y), size=(d.w, d.h))
    elif d.wtype == "DatePicker":
        wx.adv.DatePickerCtrl(panel, pos=(d.x, d.y), size=(d.w, d.h))
    # ... 其余类型