嗨,我在玩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;
}
}
这与涡旋物理学有关吗?