Flutter中无法在Arc上方绘制文本问题求助

你遇到的问题其实和Z-index层级关系不大，先给你理清两个关键点：

首先，Flutter的Canvas绘制逻辑是按代码执行顺序决定层级——后调用的绘制操作会覆盖在之前的内容上面，没有专门的Z-index属性。你代码里文本是最后绘制的，理论上应该出现在圆弧上方，所以看不见文本的原因不在层级。

真正的问题是：你的TextPainter缺少了必须的textDirection参数！TextPainter需要明确文本的排版方向（从左到右/从右到左），否则它无法正确完成布局和渲染，导致文本根本没有被画出来，自然就看不到了。

给你修正后的代码，重点看TextPainter的创建部分：

import 'dart:math' as math;
import 'package:flutter/material.dart';

class ChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    print(size.width);
    print(size.height);
    final Paint paint = new Paint()..color = Colors.blue;
    // Draw a circle that circumscribes the arrow.
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 50.0;
    paint.isAntiAlias = true;

    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), 0.0, -math.pi / 4, false, paint);
    paint.color = Colors.orange;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), -math.pi / 4, -math.pi / 4, false, paint);
    paint.color = Colors.green;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), -math.pi / 2, -math.pi / 4, false, paint);
    paint.color = Colors.purple;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), -math.pi * 3 / 4, -math.pi / 4, false, paint);

    TextSpan span = new TextSpan(
      style: new TextStyle(color: Colors.black, fontSize: 24.0, fontFamily: 'Roboto'),
      text: "Ajay Singh");
    TextPainter tp = new TextPainter(
      text: span,
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr, // 新增这个必填参数
    );
    tp.layout();
    tp.paint(canvas, new Offset(100.0, 100.0));
  }

  @override
  bool shouldRepaint(ChartPainter oldDelegate) {
    return true;
  }
}

另外再给你两个小提醒：

• 确认Offset(100.0, 100.0)的位置在你的画布可见范围内，如果画布尺寸太小，文本可能会超出显示区域；
• 如果你后续需要调整层级关系，只需要调整绘制顺序——比如想让某个圆弧显示在文本上方，就把该圆弧的绘制代码放在文本绘制之后即可。

内容的提问来源于stack exchange，提问作者Ajay Singh Beniwal