Flutter自定义形状（CustomPaint）中文本定位问题求助

你的问题核心在于自定义形状的绘制依赖了屏幕全局尺寸（MediaQuery），而子Container是独立的固定尺寸组件，导致两者的坐标系统完全不匹配，自然会分开堆叠显示。另外shouldRepaint总是返回true也会造成不必要的性能浪费。

下面是修改后的完整实现，能让文本精准显示在自定义形状的右下角：

import 'package:flutter/material.dart';

class CustomShapeDemo extends StatelessWidget {
  const CustomShapeDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        // 使用CustomPaint，子组件的尺寸会作为CustomPaint的size
        child: CustomPaint(
          painter: RightBox(),
          // 子Container的尺寸就是CustomPaint的绘制尺寸
          child: Container(
            height: 200,
            width: 200,
            alignment: Alignment.bottomRight, // 让文本对齐右下角
            padding: const EdgeInsets.only(right: 15, bottom: 10), // 加内边距避免贴边
            child: const Text(
              "Hi Khushal",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
      ),
    );
  }
}

class RightBox extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 现在用CustomPaint自身的size（也就是子Container的200x200）来计算路径坐标
    Paint paint = Paint()..color = Colors.black;

    Path path = Path()
      // 基于size的比例计算点，确保形状和子容器尺寸绑定
      ..moveTo(size.width * 0.02, size.height * 0.85)
      ..lineTo(size.width * 0.05, size.height * 0.70)
      ..lineTo(size.width * 0.95, size.height * 0.67)
      ..lineTo(size.width * 0.98, size.height * 0.85)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(RightBox oldDelegate) {
    // 只有当Delegate变化时才重绘，优化性能
    return false;
  }
}

关键修改点说明： #

• 移除了MediaQuery依赖：不再用屏幕尺寸绘制路径，而是使用CustomPaint的size参数（这个size默认就是子组件的尺寸），让形状和子Container完全对齐。
• 调整了Path的坐标：把原来基于屏幕一半的坐标改成基于CustomPaint自身size的比例，这样不管子容器尺寸怎么变，形状都会适配。
• 子Container使用alignment：通过Alignment.bottomRight让文本直接对齐到容器右下角，再配合padding避免文本贴在形状边缘。
• 优化shouldRepaint：因为你的RightBox没有可变属性，所以返回false即可，减少不必要的重绘。

这样修改后，文本就会精准显示在自定义黑色形状的右下角，不会再出现堆叠错位的问题啦～

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