flutter 如何绘制一个工具提示矩形触摸时,自定义画家的形状之一?

cvxl0en2  于 12个月前  发布在  Flutter
关注(0)|答案(1)|浏览(178)

我有一个由custompainter制作的简单图表,我还使用了一个可触摸的库来检测触摸,但我不知道如何让它在用户触摸时重新绘制或绘制矩形。
尝试的方法:

  • 点击后直接绘制
onTapDown: (details) {
          //display details
          toolTipDisplay = true;
          toolTipPos =
              Offset(details.globalPosition.dx, details.globalPosition.dy);
          canvas.drawRect(
              Rect.fromLTRB(toolTipPos.dx, toolTipPos.dy, 100, 100), paint);
        },

这将导致错误Unhandled Exception: Bad state: A Dart object attempted to access a native peer, but the native peer has been collected (nullptr). This is usually the result of calling methods on a native-backed object when the native resources have already been disposed.

  • 尝试在onTap Func中设置要更改的变量,并在paint Func上绘制它。单击时不绘制任何内容。

下面是油漆工的油漆功能:

void paint(Canvas canvas, Size size) {
        //turn canvas to canvas with hittest
        touchable.TouchyCanvas touchCanvas =
            touchable.TouchyCanvas(context, canvas);
    
        // calculate series
        // 20% empty space
        // 80% series
        double seriesWidth = chartWidth / barData[0].valueList.length;
        double seriesLeft = chartLeft;
    
        // and then work on adding the height of the bars
    
        barData.asMap().forEach((index, series) {
             paintBars(seriesWidth, seriesLeft, series, maxY, chartHeight, touchCanvas,
              redPaint, index);
        });
    
        Paint linePaint = Paint();
        linePaint.color = Colors.red;
        linePaint.strokeWidth = 3;
        lineData.asMap().forEach((index, series) {
            paintLines(seriesWidth, seriesLeft, series, maxY, chartHeight,
              touchCanvas, linePaint, index);
        });
    
        // axis titles
        // xTitle
        if (xAxisTitle != null) {
            paintXAxisTitle(chartLeft, chartWidth, chartHeight, size, canvas);
        }
        // yTitle
        if (yAxisTitle != null) {
            paintYAxisTitle(chartLeft, size, chartHeight, canvas);
        }
        paintXTitles(seriesLeft, seriesWidth, chartHeight, size, canvas);
        paintYTitles(
            nextUnit, maxY, chartHeight, size, chartWidth, canvas, blackPaint);
    
        //display tooltip
        if (toolTipDisplay) {
            Paint toolTipPaint = Paint();
            toolTipPaint.color = Colors.blue;
            canvas.drawRRect(
                RRect.fromLTRBR(
                    toolTipPos.dx, toolTipPos.dy, 100, 100, Radius.circular(20)),
                toolTipPaint);
        }
    }

onTap函数位于paintLinespaintBars内部。

v9tzhpje

v9tzhpje1#

Tooltip已经被设计为一个处于 Flutter 状态的Widget:https://api.flutter.dev/flutter/material/Tooltip-class.html

Tooltip(
  key: tooltipkey,
  triggerMode: TooltipTriggerMode.manual,
  showDuration: const Duration(seconds: 1),
  message: 'I am a Tooltip',
  child: const Text('Tap on the FAB'),
),
  • 您可以从上面的链接中找到多个案例和定制示例。*

另外,通过包实现这一点:https://pub.dev/packages/just_the_tooltip

  • (此包提供工具提示的自定义)*

相关问题