Flutter学习笔记 --事件通知_flutter通知栏提醒

在Flutter中Notification会沿着当前的Context节点从下向上传递，所有父节点都可以通过NotificationListener监听通知，有点类似于冒泡事件。常用的通知监听有LayoutChangeNotification、SizeChangedLayoutNotifier和ScrollNotification等。

例如监听ListView的滚动状态，就可以使用ScrollNotification,代码如下：

class _ScrollNotificationState extends State<ScrollNotificationPage> {
  String _message = '通知';

  get palyload => _message;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.green,
              height: 50,
              width: MediaQuery.of(context).size.width,
              child: Center(
                child: Text(
                  _message,
                  style: const TextStyle(fontSize: 30, color: Colors.white),
                ),
              ),
            ),
            Expanded(
                child: NotificationListener<ScrollNotification>(
              child: ListView.builder(
                itemBuilder: (BuildContext, index) {
                  return ListTile(
                    title: Text('第$index个猴子'),
                  );
                },
                itemCount: 50,
              ),
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollStartNotification) {
                  _onScrollStart(scrollNotification.metrics);
                } else if (scrollNotification is ScrollUpdateNotification) {
                  _onScrollUpdate(scrollNotification.metrics);
                } else if (scrollNotification is ScrollEndNotification) {
                  _onScrollEnd(scrollNotification.metrics);
                }
                return false;
              },
            ))
          ],
        ));
  }

  void _onScrollStart(ScrollMetrics scrollMetrics) {
    print(scrollMetrics.pixels);
    setState(() {
      this._message = '滚动开始';
    });
    showNotification();
  }

  void _onScrollUpdate(ScrollMetrics scrollMetrics) {
    print(scrollMetrics.pixels);
    setState(() {
      this._message = '滚动中';
    });

    showNotification();
    FlutterAppBadger.updateBadgeCount(10);

  }

  void _onScrollEnd(ScrollMetrics scrollMetrics) {
    print(scrollMetrics.pixels);

    setState(() {
      this._message = '滚动结束';
    });
    showNotification();
  }

  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    var android = const AndroidInitializationSettings('@mipmap/ic_launcher');
    var ios = const IOSInitializationSettings();
    var initSettings = InitializationSettings(android: android, iOS: ios);
    flutterLocalNotificationsPlugin.initialize(initSettings);
  }
  showNotification() async {
    var android = const AndroidNotificationDetails('channel id', 'channel NAME',
    priority: Priority.high, importance: Importance.max);

    var iOS = IOSNotificationDetails();
    var platform = NotificationDetails(android: android, iOS: iOS);
    await flutterLocalNotificationsPlugin.show(0, '通知', '通知：$_message', platform, payload: '通知界面');
  }

  Future onSelectNotification(String payload) async {
    await Navigator.push(context, MaterialPageRoute(builder: (context) => ScrollNotificationPage(title: palyload)),);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

通知栏消息,在Flutter中想要将通知显示在手机的通知栏上，就需要使用Flutter库：flutter_local_notifications。使用方法如下：

• 添加依赖，在pubspec.yaml文件中添加：dependencies:
  flutter_local_notifications: ^9.1.5
  *初始化参数：

late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    var android = const AndroidInitializationSettings('@mipmap/ic_launcher');
    var ios = const IOSInitializationSettings();
    var initSettings = InitializationSettings(android: android, iOS: ios);
    flutterLocalNotificationsPlugin.initialize(initSettings);
  }
  showNotification() async {
    var android = const AndroidNotificationDetails('channel id', 'channel NAME',
    priority: Priority.high, importance: Importance.max);

    var iOS = IOSNotificationDetails();
    var platform = NotificationDetails(android: android, iOS: iOS);
    await flutterLocalNotificationsPlugin.show(0, '通知', '通知：$_message', platform, payload: '通知界面');
  }

  Future onSelectNotification(String payload) async {
    await Navigator.push(context, MaterialPageRoute(builder: (context) => ScrollNotificationPage(title: palyload)),);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行效果：