Flutter 中如何为 CustomPaint 实现支持全方向滚动的滚动条

这个需求完全可以实现，核心逻辑是让CustomPaint适配你需要的超大绘制尺寸，再嵌套双向滚动容器并绑定对应滚动条即可，具体操作步骤如下：

操作步骤 #

• 第一步：先确定你需要的总绘制画布尺寸，比如你需要2000*2000的绘制空间，就先把这个尺寸常量定义好。
• 第二步：实现双向滚动容器，推荐用嵌套的SingleChildScrollView分别处理横向和纵向滚动，再给两个方向分别挂载Scrollbar组件，不需要额外引入第三方依赖。
• 第三步：将CustomPaint放在滚动容器的最内层，给它显式指定你预设的总画布宽高，不要让它被父组件约束为屏幕尺寸。
• 第四步：调整你的CustomPainter绘制逻辑，所有绘制坐标都以你设定的总画布尺寸为基准，不要调用屏幕尺寸相关的接口做绘制位置计算。

示例代码 #

import 'package:flutter/material.dart';

class ScrollableCustomPaintPage extends StatefulWidget {
  const ScrollableCustomPaintPage({super.key});

  @override
  State<ScrollableCustomPaintPage> createState() => _ScrollableCustomPaintPageState();
}

class _ScrollableCustomPaintPageState extends State<ScrollableCustomPaintPage> {
  // 自定义总绘制画布尺寸，可根据需求调整
  static const double canvasWidth = 2000;
  static const double canvasHeight = 2000;
  // 滚动控制器，用于绑定滚动条
  final ScrollController _verticalScrollController = ScrollController();
  final ScrollController _horizontalScrollController = ScrollController();

  @override
  void dispose() {
    _verticalScrollController.dispose();
    _horizontalScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("可滚动CustomPaint示例")),
      body: Scrollbar(
        // 纵向滚动条
        controller: _verticalScrollController,
        thumbVisibility: true, // 滚动条常显，不需要可以设为false
        child: SingleChildScrollView(
          controller: _verticalScrollController,
          physics: const AlwaysScrollableScrollPhysics(),
          child: Scrollbar(
            // 横向滚动条
            controller: _horizontalScrollController,
            thumbVisibility: true,
            notificationPredicate: (notification) => notification.depth == 1,
            child: SingleChildScrollView(
              controller: _horizontalScrollController,
              scrollDirection: Axis.horizontal,
              physics: const AlwaysScrollableScrollPhysics(),
              child: SizedBox(
                width: canvasWidth,
                height: canvasHeight,
                child: CustomPaint(
                  painter: YourCustomPainter(), // 替换成你自己的Painter实现
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 示例Painter，可替换为你自己的绘制逻辑
class YourCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // size就是你设置的总画布尺寸2000*2000，直接基于这个尺寸绘制即可
    Paint paint = Paint()..color = Colors.blue;
    canvas.drawCircle(Offset(size.width/2, size.height/2), 100, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

注意事项 #

• 如果你使用的是Flutter 3.10及以上版本，也可以直接用TwoDimensionalScrollView实现双向滚动，代码会更简洁，滚动体验也更流畅。
• 如果需要缩放+滚动的组合交互，可以替换为InteractiveViewer组件，设置maxScale和minScale参数即可同时支持缩放和拖拽滚动。

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