Flutter 局部刷新（三）——Provider

参考 juejin.cn/post/727779… 使用Provider实现了一个跑马灯效果

import 'dart:async';
import 'dart:math';

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

class TProviderTest extends StatelessWidget {
  TProviderTest({super.key});

  Timer? timer;
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<_SequenceList>(
      create: (_) => _SequenceList(),
      builder: (context, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Provider 局部刷新'),
          ),
          body: Column(
            children: [
              Row(
                children: [
                  ElevatedButton(
                      onPressed: () {
                        final currentSequences =
                            Provider.of<_SequenceList>(context, listen: false)
                                .sequenceList;
                        timer =
                            Timer.periodic(Duration(milliseconds: 20), (timer) {
                          int value = Random().nextInt(10);

                          if (currentSequences[value]['color'] ==
                              Colors.black) {
                            currentSequences[value]['color'] = Colors.blue;
                          } else {
                            currentSequences[value]['color'] = Colors.black;
                          }
                          Provider.of<_SequenceList>(context, listen: false)
                              .set(currentSequences);
                        });
                      },
                      child: Text('开始闪烁')),
                  ElevatedButton(
                      onPressed: () {
                        timer!.cancel();
                        final currentSequences =
                            Provider.of<_SequenceList>(context, listen: false)
                                .sequenceList;
                        currentSequences.forEach((element) {
                          element['color'] = Colors.black;
                        });
                        Provider.of<_SequenceList>(context, listen: false)
                            .set(currentSequences);
                      },
                      child: Text('复位')),
                ],
              ),
              Consumer<_SequenceList>(builder: ((context, value, child) {
                return Column(
                  children: [
                    for (var item in value.sequenceList)
                      Container(
                        width: 20,
                        height: 20,
                        color: item['color'] as Color,
                        margin: EdgeInsets.only(bottom: 10),
                      )
                  ],
                );
              }))
            ],
          ),
        );
      },
    );
  }
}

class _SequenceList with ChangeNotifier {
  List<Map<String, Color>> _sequenceList = [
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
    {
      'color': Colors.black,
    },
  ];
  void set(list) {
    _sequenceList = list;
    notifyListeners();
  }

  List<Map<String, Color>> get sequenceList => _sequenceList;
}