原文鏈接
在這篇指導中，你能學習如何使用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
歡迎大家關注我的網站：
