在颤抖中,自定义视图刷新受文本影响,该文本每秒刷新一次

时间:2019-01-24 11:20:12

标签: flutter

here is the gif

我自定义了一个进度条,扩展了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;
  }
}

0 个答案:

没有答案