Flutter技术问题：如何在RenderBox组件中显示现有TextFormField？

你不能在RenderBox的paint方法里直接返回或渲染TextFormField——paint方法的作用是直接操作Canvas绘制像素级图形，它不属于Flutter的Widget组件渲染流程，无法处理Widget的布局、交互等核心逻辑。

下面提供两种可行的实现方案：

方案一：用Stack组合自定义绘制组件和TextFormField #

这是最简单的实现方式，直接通过Stack将自定义绘制的Widget与TextFormField叠放：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextFormField')),
      body: SafeArea(
        child: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 你的自定义绘制组件
              MyWidget(),
              // 添加TextFormField
              SizedBox(
                width: 250,
                child: TextFormField(
                  decoration: const InputDecoration(
                    icon: Icon(Icons.person),
                    labelText: 'Name *',
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 保留你原有的自定义绘制组件代码
class MyWidget extends SingleChildRenderObjectWidget {
  @override
  RenderObject createRenderObject(BuildContext context) {
    return _RenderMyWidget();
  }
}

class _RenderMyWidget extends RenderBox {
  @override
  bool hitTestSelf(Offset position) => true;

  @override
  bool get sizedByParent => true;

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    return constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final Canvas canvas = context.canvas;
    // 这里可以添加你的自定义绘制逻辑，比如绘制背景
    canvas.drawRect(
      offset & size,
      Paint()..color = Colors.grey.shade200,
    );
  }
}

方案二：用MultiChildRenderObjectWidget让自定义RenderObject管理子Widget #

如果想让自定义RenderObject直接管理子Widget（比如TextFormField），需要基于MultiChildRenderObjectWidget实现，让RenderObject负责子节点的布局与渲染：

1. 创建子节点数据类 #

用于存储子节点的布局偏移信息：

class _ChildData extends ContainerBoxParentData<RenderBox> {}

2. 实现MultiChildRenderObjectWidget #

class MyWidgetWithChild extends MultiChildRenderObjectWidget {
  MyWidgetWithChild({Key? key, required Widget child})
      : super(key: key, children: [child]);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _RenderMyWidgetWithChild();
  }
}

3. 实现支持多子节点的RenderBox #

class _RenderMyWidgetWithChild extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, _ChildData> {
  @override
  bool hitTestSelf(Offset position) => true;

  @override
  bool get sizedByParent => true;

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    return constraints.biggest;
  }

  @override
  void performLayout() {
    // 布局子节点，这里设置为居中显示
    if (firstChild != null) {
      firstChild!.layout(
        BoxConstraints.loose(size),
        parentUsesSize: true,
      );
      final _ChildData childData = firstChild!.parentData as _ChildData;
      childData.offset = Offset(
        (size.width - firstChild!.size.width) / 2,
        (size.height - firstChild!.size.height) / 2,
      );
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // 先绘制自定义内容
    final Canvas canvas = context.canvas;
    canvas.drawRect(
      offset & size,
      Paint()..color = Colors.grey.shade200,
    );

    // 绘制子节点
    if (firstChild != null) {
      final _ChildData childData = firstChild!.parentData as _ChildData;
      context.paintChild(firstChild!, offset + childData.offset);
    }
  }

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! _ChildData) {
      child.parentData = _ChildData();
    }
  }
}

4. 在页面中使用 #

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextFormField')),
      body: SafeArea(
        child: Center(
          child: MyWidgetWithChild(
            child: SizedBox(
              width: 250,
              child: TextFormField(
                decoration: const InputDecoration(
                  icon: Icon(Icons.person),
                  labelText: 'Name *',
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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