我自定义了一个进度条,扩展了CustomPaint。然后将其放在一个页面中,它运行良好。接下来,我在同一页面中放置一个Text,它显示当前时间并每秒刷新一次。进度栏刷新不正确,它也一秒刷新一次,不顺畅。我不知道为什么。
这是我的代码:
class TimeWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TimeState();
}
}
class TimeState extends State{
var bloc;
static const eventChanel =
const EventChannel('com.example.flutterapp/main_event');
StreamSubscription _timerSubscription;
@override
Widget build(BuildContext context) {
bloc = BlocProvider.ofTime(context);
return StreamBuilder(
stream: bloc.stream,
initialData: bloc.value,
builder: (context, snapshot) => Text(
"${snapshot.data}",
));
}
@override
void initState() {
super.initState();
_enableTimer();
}
@override
void dispose() {
_disableTimer();
super.dispose();
}
void _enableTimer() {
if (_timerSubscription == null) {
_timerSubscription =
eventChanel.receiveBroadcastStream().listen(_updateTimer); // 添加监听
}
}
void _disableTimer() {
if (_timerSubscription != null) {
_timerSubscription.cancel();
_timerSubscription = null;
}
}
void _updateTimer(time) {
if (bloc != null) {
bloc.setTime(time);
}
}
}
进度栏:
class ProgressbarWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return ProgressState();
}
}
class ProgressState extends State{
double _progress = 0;
StreamSubscription subscription;
@override
void initState() {
var stream =
new Stream.periodic(const Duration(milliseconds: 100));
subscription = stream.listen((result) {
if (_progress < 360) {
_progress += 10;
} else {
_progress = 0;
}
setState(() {});
});
super.initState();
}
@override
void dispose() {
subscription.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Container(
child: CustomPaint(
painter: ProgressBar(_progress),
));
}
}
class ProgressBar extends CustomPainter {
ProgressBar(double progress){
this._progress = progress;
//print(progress);
}
Paint _btmPaint = new Paint()
..color = Colors.black12
..isAntiAlias = true
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 20;
Paint _progressPaint = new Paint()
..color = Colors.lightGreen
..isAntiAlias = true
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 20;
double _progress;
@override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(Offset(0, 0), 50, _btmPaint);
Rect rect = Rect.fromCircle(center: Offset(0, 0), radius: 50);
canvas.drawArc(rect, 0, _progress * 3.14 / 180, false, _progressPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}