Flutter：如何根据JSON位置在Canvas添加各类用户输入组件

Canvas本身是用于绘制图形的底层API，无法直接嵌入TextField、Radio这类Widget组件。你可以通过Stack + Positioned的组合来实现需求，核心是把JSON返回的位置参数映射到Positioned的定位属性上，动态生成对应的输入组件。

具体步骤 #

• 第一步：定义数据模型
  先把JSON结构转换成Dart实体类，方便后续处理。比如：

  enum InputComponentType { textField, radio, checkbox, datePicker }
  
  class InputComponent {
    final InputComponentType type;
    final double left;
    final double top;
    final double width;
    final double height;
    final Map<String, dynamic> props; // 存储组件属性，比如hintText、options等
  
    InputComponent({
      required this.type,
      required this.left,
      required this.top,
      required this.width,
      required this.height,
      required this.props,
    });
  
    // 从JSON解析的方法
    factory InputComponent.fromJson(Map<String, dynamic> json) {
      return InputComponent(
        type: InputComponentType.values.firstWhere((e) => e.name == json['type']),
        left: json['left'].toDouble(),
        top: json['top'].toDouble(),
        width: json['width'].toDouble(),
        height: json['height'].toDouble(),
        props: json['props'],
      );
    }
  }
  

• 第二步：动态生成定位组件
  在StatefulWidget中，解析JSON得到InputComponent列表后，用Stack包裹所有Positioned组件，根据组件类型生成对应的输入Widget：

  class DynamicForm extends StatefulWidget {
    final List<InputComponent> components;
    const DynamicForm({super.key, required this.components});
  
    @override
    State<DynamicForm> createState() => _DynamicFormState();
  }
  
  class _DynamicFormState extends State<DynamicForm> {
    // 维护输入状态，比如单选值、复选状态、文本内容等
    final Map<String, dynamic> _formValues = {};
  
    @override
    Widget build(BuildContext context) {
      return Stack(
        children: widget.components.map((component) {
          return Positioned(
            left: component.left,
            top: component.top,
            width: component.width,
            height: component.height,
            child: _buildInputComponent(component),
          );
        }).toList(),
      );
    }
  
    Widget _buildInputComponent(InputComponent component) {
      switch (component.type) {
        case InputComponentType.textField:
          return TextField(
            decoration: InputDecoration(
              hintText: component.props['hintText'],
              border: const OutlineInputBorder(),
            ),
            onChanged: (value) {
              _formValues[component.props['key']] = value;
            },
          );
        case InputComponentType.radio:
          return Column(
            children: (component.props['options'] as List).map((option) {
              return RadioListTile(
                title: Text(option['label']),
                value: option['value'],
                groupValue: _formValues[component.props['key']],
                onChanged: (value) {
                  setState(() {
                    _formValues[component.props['key']] = value;
                  });
                },
              );
            }).toList(),
          );
        case InputComponentType.checkbox:
          return CheckboxListTile(
            title: Text(component.props['label']),
            value: _formValues[component.props['key']] ?? false,
            onChanged: (value) {
              setState(() {
                _formValues[component.props['key']] = value;
              });
            },
          );
        case InputComponentType.datePicker:
          return TextField(
            readOnly: true,
            decoration: InputDecoration(
              hintText: component.props['hintText'],
              border: const OutlineInputBorder(),
            ),
            onTap: () async {
              final pickedDate = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2000),
                lastDate: DateTime(2100),
              );
              if (pickedDate != null) {
                setState(() {
                  _formValues[component.props['key']] = pickedDate.toString();
                });
              }
            },
          );
        default:
          return const SizedBox();
      }
    }
  }
  

• 第三步：解析JSON并使用
  拿到后端返回的JSON数组后，解析成InputComponent列表，传入DynamicForm即可：

  // 示例JSON解析
  final jsonData = [
    {
      "type": "textField",
      "left": 20,
      "top": 50,
      "width": 300,
      "height": 50,
      "props": {"key": "username", "hintText": "请输入用户名"}
    },
    // 其他组件的JSON数据
  ];
  
  final components = jsonData.map((json) => InputComponent.fromJson(json)).toList();
  
  // 在页面中使用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicForm(components: components),
    );
  }
  

注意事项 #

• 如果JSON中的坐标是百分比（比如left为0.1代表屏幕宽度的10%），需要先根据屏幕尺寸计算实际像素值：MediaQuery.of(context).size.width * 0.1
• 状态管理可以根据项目规模选择，简单场景用StatefulWidget的本地状态即可，复杂场景可以用Provider、Riverpod等全局状态管理工具
• 可以给Stack添加背景绘制（用CustomPaint）来模拟Canvas的背景需求，输入组件叠加在背景之上

内容的提问来源于stack exchange，提问作者Jaimil Patel