Question

我正在使用Flutter的CustomPaint绘制散点图，用户可以通过点击来添加点。由于整个图表无法容纳在移动屏幕上，因此我希望用户能够平移。如何启用此功能？目前，该图表尚未平移，因此我只能看到其中的一部分。这是我的代码：

import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';

class Draw extends StatefulWidget {

  String eventName;

  Draw({this.eventName});

  @override
  _DrawState createState() => _DrawState();
}

class _DrawState extends State<Draw> {
  List<Offset> points = List();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: CustomPaint(
          size: Size.infinite,
          painter: DrawingPainter(),
        ),
      ),
    );
  }
}

class DrawingPainter extends CustomPainter {

  DrawingPainter();

  Paint tickSettings = Paint()
    ..strokeCap = (Platform.isAndroid) ? StrokeCap.butt : StrokeCap.round
    ..isAntiAlias = true
    ..color = Colors.grey
    ..strokeWidth = 5.0;

  static double axisXCoord = 60;
  static double axisHt = 1000;
  var ticks = List<Offset>.generate(10, (i) => Offset(axisXCoord, i * (axisHt / 10) + 30));

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPoints(PointMode.points, ticks, tickSettings);
  }

  @override
  bool shouldRepaint(DrawingPainter oldDelegate) => true;
}

（注意，我还看到了Google的Flutter Charts库，但我的理解是，交互性仅限于某些事情，例如选择图表上的现有点。）

Answer 1

似乎我通过将GestureDetector包裹在SingleChildScrollView中来解决了这个问题。

Flutter CustomPaint，如何启用平移？

1 个答案: