如何在 Flutter 的 Canvas 上绘制一个 Widget？

Question

有什么方法可以在 Canvas 上的给定位置绘制 Widget 吗？

更具体地说，我想在实际 FlutterMap 小部件前面的单独 Canvas 上绘制与 FlutterMap 相关的 Marker 的子小部件.这是创建一个可以做到这一点的 CustomPainter 的尝试，但我无法弄清楚如何在 canvas 上实际绘制小部件。使用 RenderObject 需要一个 PaintingContext，我不知道如何 create/retrieve:

class MarkerPainter extends CustomPainter {
  MapController mc;
  BuildContext context;
  List<Marker> markers;

  MarkerPainter(this.context, this.mc, this.markers);

  @override
  void paint(Canvas canvas, Size size) {
    if( markers != null && markers.isNotEmpty ){
      for(int i=0; i<markers.length; i++){
        Marker marker = markers[i];
        Offset o = myCalculateOffsetFromLatLng(marker.point, mc, context);

        // Won't work, this needs a PaintingContext...
        marker.builder(context).createElement().renderObject.paint(context, o); 
      }
    }
  }

  @override
  bool shouldRepaint(MarkerPainter oldDelegate) => oldDelegate.markers != markers;
}

Answer 1

您不能使用 CustomPainter 执行此操作。

这 class 只是实际交易的简化：RenderObject，它可以访问与画家（和布局+更多）相关的所有内容。

你应该做的是，而不是 CustomPainter，创建一个 RenderBox (a 2d RenderObject)

在你的例子中，你想要的是绘制一个小部件列表。在这种情况下，您需要创建：

a MultiChildRenderObjectWidget，需要 children 才能绘制的小部件
a RenderBox which mix-in RenderBoxContainerDefaultsMixin, which adds the necessary to RenderBox 用于处理子列表。

总结一下，这样使用的小部件：

MyExample(
  children: [
    Text('foo'),
    Text('bar'),
  ],
),

会这样写：

import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MyExample extends MultiChildRenderObjectWidget {
  MyExample({
    Key? key,
    required List<Widget> children,
  }) : super(key: key, children: children);

  @override
  RenderMyExample createRenderObject(BuildContext context) {
    return RenderMyExample();
  }
}

class MyExampleParentData extends ContainerBoxParentData<RenderBox> {}

class RenderMyExample extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, MyExampleParentData> {
  @override
  void setupParentData(RenderObject child) {
    if (child.parentData is! MyExampleParentData) {
      child.parentData = MyExampleParentData();
    }
  }

  @override
  void performLayout() {
    size = constraints.biggest;

    for (var child = firstChild; child != null; child = childAfter(child)) {
      child.layout(
        // limit children to a max height of 50
        constraints.copyWith(maxHeight: 50),
      );
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // Paints all children in order vertically, separated by 50px

    var verticalOffset = .0;
    for (var child = firstChild; child != null; child = childAfter(child)) {
      context.paintChild(child, offset + Offset(0, verticalOffset));

      verticalOffset += 50;
    }
  }
}

如何在 Flutter 的 Canvas 上绘制一个 Widget？

How can I paint a Widget on a Canvas in Flutter?

flutter

flutter-layout

flutter-widget

flutter-canvas

fluttermap