Ados

a fullstack game worker

0%

每天进步一点点027 - Flutter异步UI更新

Preface

其实这几篇笔记都是记录几种ui的更新方式。

这一篇是记录的 StreamBuilder

Contents

两个例子

Example 1

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
import 'dart:async';

import 'package:flutter/material.dart';

class StreamBuilderPage extends StatefulWidget {
StreamBuilderPage({Key? key}) : super(key: key);

@override
_StreamBuilderPageState createState() => _StreamBuilderPageState();
}

class _StreamBuilderPageState extends State<StreamBuilderPage> {
var count = 0;
// StreamSubscription 用于管理监听,关闭暂停等
// late StreamSubscription<String> subscription;
// StreamController
late StreamController<String> streamController;
// StreamSink用于发射事件
StreamSink<String> get streamSink => streamController.sink;
// 获取Stream,用于监听
Stream<String> get streamData => streamController.stream;

void dispath() {
// 发射一个事件
streamSink.add(count.toString());
count++;
}

@override
void initState() {
super.initState();
streamController = StreamController<String>();
streamSink.add("0");

// subscription = streamData.listen((event) {
// print("stream updated $event");
// }, onError: (err) {
// print("stream error: $err");
// }, onDone: () {
// print("stream done");
// });
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Stream Builder"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
StreamBuilder(
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
return Text("Result: ${snapshot.data}");
},
stream: streamData,
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: dispath,
child: const Icon(Icons.add),
),
);
}
}

Example 2

StreamBuilderFutureBuilder,两个都差不多,差别只是数据源一个是 Stream 一个是 Future.

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
import 'package:flutter/material.dart';

Future<String> mockNetwork() async {
return Future.delayed(
Duration(seconds: 3),
() => "Data from network, u know...",
);
}

Stream<int> counter() {
return Stream.periodic(Duration(seconds: 1), (i) {
return i;
});
}

class StreamBuilderPage2 extends StatelessWidget {
const StreamBuilderPage2({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Stream Builder test 2"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 20,
),
Center(
child: StreamBuilder<int>(
stream: counter(),
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasError) {
return Text("Error: ${snapshot.error}");
}
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text("No stream");
case ConnectionState.waiting:
return Text("Wating");
case ConnectionState.active:
return Text("active: ${snapshot.data}");
case ConnectionState.done:
return Text("Stream closed...");
}
},
),
),
const SizedBox(
height: 20,
),
FutureBuilder(
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Text("Error: ${snapshot.error}");
} else {
return Text("Success: ${snapshot.data}");
}
} else {
// Loading
return CircularProgressIndicator();
}
},
future: mockNetwork(),
)
],
),
);
}
}


Reference

  1. StreamBuilder