Flutter：Stream.periodic 示例

本文將帶您了解在 flutter中使用Stream.periodic的完整示例

該Stream.periodic構造，顧名思義，是用來創建流，在周期間隔反復廣播事件。簡單用法：

final Stream _myStream = Stream.periodic(const Duration(seconds: 1), (int count) { // Do something and return something here });

1

2

3

4

您可以在文檔中找到有關Stream.periodic 的更多信息。但是，如果您覺得單詞太無聊和令人困惑，并且只想深入研究代碼，請繼續閱讀下面的示例。

我們將要構建的應用程序的背景顏色會隨著時間而變化。它還在屏幕中央顯示遞增的數字。我們可以通過按下浮動按鈕來阻止這些無情的行為。

這是它的工作原理：

main.dart 中的完整源代碼和解釋：

import 'package:flutter/material.dart'; import 'dart:async'; import 'dart:math'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( // Hide the debug banner debugShowCheckedModeBanner: false, title: 'KindaCode.com', theme: ThemeData( primarySwatch: Colors.indigo, ), home: const HomeScreen(), ); } } class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { final Stream _myStream = Stream.periodic(const Duration(seconds: 1), (int count) { return count; }); // The subscription on events from _myStream late StreamSubscription _sub; // This number will be displayed in the center of the screen // It changes over time int _computationCount = 0; // Background color // In the beginning, it's indigo but it will be a random color later Color _bgColor = Colors.indigo; @override void initState() { _sub = _myStream.listen((event) { setState(() { _computationCount = event; // Set the background color to a random color _bgColor = Colors.primaries[Random().nextInt(Colors.primaries.length)]; }); }); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: _bgColor, appBar: AppBar( title: const Text('Lucklyの博客'), backgroundColor: Colors.transparent, ), body: Center( child: Text( _computationCount.toString(), style: const TextStyle(fontSize: 150, color: Colors.white), ), ), // This button is used to unsubscribe the stream listener floatingActionButton: FloatingActionButton( child: const Icon( Icons.stop, size: 30, ), onPressed: () => _sub.cancel(), ), ); } // Cancel the stream listener on dispose @override void dispose() { _sub.cancel(); super.dispose(); } }

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

結論

我們已經研究了在 Flutter中實現Stream.periodic的實際示例。如果您想了解更多關于流，類似的事情流，請繼續關注我！

Flutter

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。