使用Flutter的StreamBuilder写一个demo。
好的,以下是一个简单的使用Flutter的StreamBuilder的demo:
- 首先,创建一个StreamController,用于创建一个数据流:
StreamController<bool> _streamController = StreamController<bool>();
- 在需要使用StreamBuilder的Widget中,使用StreamBuilder来监听数据流的变化:
StreamBuilder<bool>(
stream: _streamController.stream,
initialData: false,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
return Container(
child: Text(
snapshot.data ? '数据流已经变化' : '等待数据流变化',
),
);
},
);
- 在需要改变数据流的地方,使用StreamController的add方法来添加新的数据:
_streamController.add(true);
完整代码如下:
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter StreamBuilder Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter StreamBuilder Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StreamController<bool> _streamController = StreamController<bool>();
@override
void dispose() {
_streamController.close();
super.dispose();
}
void _changeStreamData() {
_streamController.add(true);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: StreamBuilder<bool>(
stream: _streamController.stream,
initialData: false,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
return Container(
child: Text(
snapshot.data ? '数据流已经变化' : '等待数据流变化',
),
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: _changeStreamData,
tooltip: '改变数据流',
child: Icon(Icons.add),
),
);
}
}
运行该demo,点击悬浮按钮可以改变数据流,从而触发StreamBuilder中的builder方法来更新UI。
原文地址: http://www.cveoy.top/t/topic/bhhR 著作权归作者所有。请勿转载和采集!