如何在动态尺寸的Container中绘制对角线？

问题场景 #

你有一个包含Text子元素的Container，其尺寸随文本长度动态变化，同时通过constraints属性限制最大、最小宽高。尝试用Stack在它上方叠加对角线时，由于第二个Container无法获取第一个的实际渲染尺寸，只能按照constraints的最小值绘制，导致对角线与目标区域不匹配。

可行解决方案 #

方案1：用Positioned.fill让CustomPaint匹配目标尺寸

不需要给第二个容器设置独立的constraints，利用Stack的特性：非定位子元素会决定Stack的整体尺寸，再通过Positioned.fill让CustomPaint填满整个Stack，自然就和第一个Container尺寸完全一致。

修改后代码示例：

Stack(
  children: [
    // 原带Text的Container，决定Stack的尺寸
    Container(
      constraints: _getConstraints(),
      padding: const EdgeInsets.all(8), // 保留原样式
      child: Text('你的动态文本内容'),
    ),
    // 用Positioned.fill让CustomPaint适配Stack尺寸
    Positioned.fill(
      child: CustomPaint(
        painter: LinePainter(),
        // 若需要文本在对角线上方，把Text放在这个Positioned.fill之后即可
      ),
    ),
  ],
)

方案2：将CustomPaint与Text放在同一个Container内

直接在目标Container内部用Stack包裹Text和CustomPaint，减少外层嵌套，让CustomPaint直接继承Container的实际尺寸：

Container(
  constraints: _getConstraints(),
  padding: const EdgeInsets.all(8),
  child: Stack(
    children: [
      Text('你的动态文本内容'),
      Positioned.fill(
        child: CustomPaint(painter: LinePainter()),
      ),
    ],
  ),
)

方案3：让CustomPaint直接包裹Text（最简推荐）

利用CustomPaint的原生特性：如果它包含子元素，自身尺寸会自动适配子元素的尺寸（同时遵守外层constraints限制）。直接把Text作为CustomPaint的子元素，在绘制逻辑中使用size参数即可拿到准确的渲染尺寸：

Container(
  constraints: _getConstraints(),
  padding: const EdgeInsets.all(8),
  child: CustomPaint(
    painter: LinePainter(),
    child: Text('你的动态文本内容'),
  ),
)

对应的LinePainter实现：

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final linePaint = Paint()
      ..color = Colors.red
      ..strokeWidth = 2;
    // 绘制左上角到右下角的对角线
    canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), linePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

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