CustomPainter使用SingleChildScrollView滚动时会引起抖动效果

时间:2020-11-01 19:56:30

标签: flutter dart

嗨,我在玩CustomPainter,并尝试通过水平滚动在任意位置和半径处放置气泡。使用SingleChildScrollView会导致震动效果错误。知道如何避免这种情况吗?

Video link here to understand what that shaking effect bug is

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

import 'package:flutter/services.dart';

class Bubble extends StatefulWidget {
  final List<String> items;
  Bubble({Key key, this.items = const []}) : super(key: key);

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

class _BubbleState extends State<Bubble> {
  double width, height;
  @override
  Widget build(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width / 2;
    debugPrint("got with $width, $height");
    return SingleChildScrollView(
      physics: ScrollPhysics(),
      scrollDirection: Axis.horizontal,
      child: CustomPaint(
        size: Size((100 * widget.items.length * 1.3).toDouble(), height),
        painter:
            CirclePainter(height: height, width: width, items: widget.items),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final double height, width;
  final List<String> items;
  final ui.Image image;
  CirclePainter({this.height, this.width, this.items, this.image});
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.pinkAccent
      ..strokeWidth = 5
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round;

    double startX = 120;
    double startY = 150 * 1.5;
    double originalStartY = 150 * 1.5;
    double originalStartX = 120;
    double midCircleYOffset = 70;
    double evenCircleYOffset = 20;
    double oddCircleYOffset = 20;
    double startRadius = 75;
    List<double> possibleSmallRadius = [85, 90];
    List<double> possibleBigRadius = [100, 110];

    items.asMap().forEach((index, value) {
      canvas.drawCircle(Offset(startX, startY), startRadius, paint);
      int nextHumanIndex = index + 2;
      int currentHumanIndex = index + 1;
      if (((nextHumanIndex) % 3 == 0)) {
        startX = startX + (startRadius * 2) + 20;
        startY = originalStartY + midCircleYOffset;
        startRadius = (possibleSmallRadius
              ..toList()
              ..shuffle())
            .first;
      } else {
        startY = startY + (startRadius * 2) + 20;
        startRadius = (possibleSmallRadius
              ..toList()
              ..shuffle())
            .first;
        if (currentHumanIndex % 3 == 0) {
          startRadius = (possibleSmallRadius
                ..toList()
                ..shuffle())
              .first;

          startX = startX + (startRadius * 2) + 20;
          startY = originalStartY;
        }
      }

      if (nextHumanIndex.isEven) {
        startY = startY + evenCircleYOffset;
      }
    });
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false;
  }
}

这与涡旋物理学有关吗?

enter image description here

0 个答案:

没有答案