Flutter如何调整CustomPainter范围，仅覆盖前两个Column元素

要让CustomPainter仅覆盖Column的前两个元素，核心是让CustomPaint的尺寸与前两个元素的总尺寸（或你需要的上半屏高度）绑定，而不是跟随整个屏幕。下面是具体实现方案：

1. 基础实现：跟随前两个元素的实际尺寸 #

把前两个元素单独封装成一个子Column，将其作为CustomPaint的child，再把这个CustomPaint作为外层Column的第一个子组件，第三个元素放在外层Column的第二个位置。

代码示例：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // CustomPaint包裹前两个元素，尺寸由子Column决定
          CustomPaint(
            painter: ShapesPainter(),
            child: Column(
              mainAxisSize: MainAxisSize.min, // 让子Column仅占用内容所需高度
              children: [
                // 第一个元素：示例Text
                const Padding(
                  padding: EdgeInsets.all(16),
                  child: Text("区域1"),
                ),
                // 第二个元素：包含两个子组件的Row
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: const [
                    Text("区域2"),
                    Text("区域3"),
                  ],
                ),
              ],
            ),
          ),
          // 第三个元素：不受CustomPainter覆盖
          const Expanded(
            child: Center(child: Text("下半屏区域")),
          ),
        ],
      ),
    );
  }
}

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final redPaint = Paint()..color = Colors.red.withOpacity(0.5);
    // 绘制覆盖CustomPaint整个尺寸的红色背景
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), redPaint);
  }

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

2. 进阶实现：固定覆盖屏幕上半部分 #

如果需要红色区域强制占屏幕上半部分（不管前两个元素内容多少），可以用Expanded给CustomPaint分配一半的屏幕高度：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 占屏幕上半部分
          Expanded(
            flex: 1,
            child: CustomPaint(
              painter: ShapesPainter(),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Padding(
                    padding: EdgeInsets.all(16),
                    child: Text("区域1"),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: const [
                      Text("区域2"),
                      Text("区域3"),
                    ],
                  ),
                ],
              ),
            ),
          ),
          // 占屏幕下半部分
          Expanded(
            flex: 1,
            child: const Center(child: Text("下半屏区域")),
          ),
        ],
      ),
    );
  }
}

为什么你之前的方法无效？ #

• 用Container包裹前两个元素：Container确实只能有一个子组件，但你可以先把前两个元素用Column包裹成一个组件，再放到Container里。不过Container无法直接使用CustomPainter作为背景，所以Stack或CustomPaint包裹子组件才是正确路径。
• 直接用CustomPainter包裹元素：CustomPainter是绘制逻辑类，不是Widget，必须通过CustomPaint这个Widget来使用，你之前可能混淆了这两个概念。
• 修改CustomPaint的size参数：当CustomPaint有child时，size参数会被忽略，它的尺寸会自动跟随child的大小；只有当没有child时，size参数才会生效。
• 用CustomPaint包裹整个Column：此时CustomPaint的尺寸等于整个Column的尺寸（即全屏），自然会覆盖全部区域。

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