首页 > 解决方案 > Flutter:将 CustomPainter 与 ScrollController 绑定

问题描述

我在CustomPainter下面有一个类似的内容,我希望它与包含一个父小部件的绑定ListView.builder我该怎么做?
预期行为:当我向上或向下滚动时,画家应该绘画。

import 'dart:math';
import 'package:flutter/material.dart';

class PlayerPainter extends CustomPainter {
  final Animation<double> animation;
  final Paint backgroundPaint;
  final Color bgColor;
  final Color thumbColor;
  final Paint sliderPaint;
  final Paint thumbPaint;

  PlayerPainter({this.animation, this.bgColor, this.thumbColor})
      : backgroundPaint = Paint()..color = bgColor,
        sliderPaint = Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 3.0,
        thumbPaint = Paint()..color = thumbColor,
        super(repaint: animation);

  @override
  void paint(Canvas canvas, Size size) {
    final value = animation.value;
    final radius = size.width * 0.5;
    final thumbRadius = 4.0;
    final rect = Rect.fromCircle(center: Offset(radius, size.height), radius: radius);
    final thumbPosX = radius + (radius * -cos(value * pi));
    final thumbPosY = (size.height - thumbRadius) + ((size.height - thumbRadius) * -sin(value * pi));
    sliderPaint.shader = LinearGradient(colors: [
      const Color(0xFFCC2B5E),
      const Color(0xFF753A88),
      const Color(0xFFCC2B5E),
      const Color(0xFF753A88),
    ]).createShader(rect);

    canvas.drawArc(rect, pi, pi, false, backgroundPaint);
    canvas.drawArc(rect, pi, value * pi, false, sliderPaint);
    canvas.drawCircle(Offset(thumbPosX, thumbPosY), thumbRadius, thumbPaint);
  }

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

父.dart

@override
  void initState() {
    _controller = AnimationController(vsync: this);
    _scrollController.addListener(() {
      setState(() {
        _controller = AnimationController(
          value: _scrollController.offset,
          duration: Duration(seconds: 0),
          vsync: this,
        );
      });
    });
}
PlayerView(
...
  controller: _controller,
  ),

════════ 基础库捕获的异常══════════════════════════════════════════ ═══════════════ _MusicScreenState 是一个 SingleTickerProviderStateMixin,但创建了多个代码。

标签: flutteranimationscrollcontroller

解决方案


推荐阅读