flutter 學習使用自定義view並添加手勢動作

原文鏈接

http://tryenough.com/flutter-gesture-canvas

在這篇指導中，你能學習如何使用gesture,並學習如何繪製一個餅圖。

當我們使用CustomPainter繪製自己的形狀時，如果你不允許與用戶交互，對用戶來說會有點沉悶，所以我們應該知道如何使用手勢來豐富我們的交互。

0. 我們要實現什麼

像往常一樣，先展示效果。我們希望當我們在屏幕上移動手指的時候，餅圖可以跟着相應的方向進行轉動。

1. 定義一個CustomPainter

首先，定義一個Painter：

class CircleTrianglePainter extends CustomPainter {
  CircleTrianglePainter({this.scrollLen});

  final double scrollLen;
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CircleTrianglePainter oldDelegate) =>
    oldDelegate.scrollLen != scrollLen;

然後，用三角弧線畫圓：

void _drawTriCircle(Canvas canvas, Paint paint,
    {Offset center,
    double radius,
    List<double> sources,
    List<Color> colors,
    double startRadian}) {
  assert(sources != null && sources.length > 0);
  assert(colors != null && colors.length > 0);
  var total = 0.0;
  for (var d in sources) {
    total += d;
  }
  List<double> radians = [];
  for (var data in sources) {
    radians.add(data * 2 * pi / total);
  }
  for (int i = 0; i < radians.length; i++) {
    paint.color = colors[i % colors.length];
    canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
        startRadian, radians[i], true, paint);
    startRadian += radians[i];
  }
}

在 paint(canvas, size) 方法中繪製我們的形狀：

if (size.width > 1.0 && size.height > 1.0) {
      print(">1.9");
      _sizeUtil.logicSize = size;
    }
    var paint = Paint()
      ..style = PaintingStyle.fill
      ..color = BLUE_NORMAL
      ..strokeWidth = 2.0
      ..isAntiAlias = true;
    paint.color = Colors.grey[900];

    paint.color = RED_DARK1;
    paint.strokeWidth = 20;
    paint.style = PaintingStyle.stroke;
    var center = Offset(
      _sizeUtil.getAxisX(250.0),
      _sizeUtil.getAxisY(250.0),
    );
    var radius = _sizeUtil.getAxisBoth(200);
    paint.style = PaintingStyle.fill;

    _drawTriCircle(
      canvas,
      paint,
      sources: [1,2,1,1,1,1,1],
      colors: [
        RED_DARK1,
        BLUE_NORMAL,
      GREEN_NORMAL,
        RED_DARK5,
        YELLOW_NORMAL
      ],
      center: center,
      radius: radius,
      startRadian: 1.4 * scrollLen / radius,
    );
    canvas.save();
    canvas.restore();

2.使用CustomPaint

你可以像下面這樣使用你的CustomPaint：

Container(
  width: 300,
  height: 300,
  child: CustomPaint(
    painter: (CircleTrianglePainter(scrollLen: _len)),
    child: Container(),
  ),
),

3.實現手勢控制

在flutter中，如果你想實現手勢，你可以先澤Listenser或者GestureDetector來滿足你的需求。他們都是widget，你可以像平常的widget一樣使用他們。但是GestureDetector有更加豐富的回調方法。這裏我們使用GestureDetector來實現我們的需求。

Container(
    child: Center(
  child: GestureDetector(
    onHorizontalDragStart: (detail) {
      _x = detail.globalPosition.dx;
    },
    onVerticalDragStart: (detail) {
      _y = detail.globalPosition.dy;
    },
    onHorizontalDragUpdate: (detail) {
      setState(() {
        _len -= detail.globalPosition.dx - _x;
        _x = detail.globalPosition.dx;
      });
    },
    onVerticalDragUpdate: (detail) {
      setState(() {
        _len += detail.globalPosition.dy - _y;
        _y = detail.globalPosition.dy;
      });
    },
    child: Container(
      width: 300,
      height: 300,
      child: CustomPaint(
        painter: (CircleTrianglePainter(scrollLen: _len)),
        child: Container(),
      ),
    ),
  ),
))

這個GestureDetector有很多的方法，我們只用了4個。我們來看下橫向的方法，縱向的類似的：

onHorizontalDragStart: (detail) {
      _x = detail.globalPosition.dx;
    },
onHorizontalDragUpdate: (detail) {
  setState(() {
    _len -= detail.globalPosition.dx - _x;
    _x = detail.globalPosition.dx;
  });
},

當我們在橫向開始拖拽的時候，我們開始記錄 x 軸的座標值。

當拖拽的位置改變後，我們記錄改變的值 _len . 這些值被用來改變上面的轉盤的角度

GitHub

歡迎大家關注我的網站：

try enough https://tryenough.com/