一、目标:使用StreamBuilder模拟实现每隔一秒返回从网络中获取的数据,并刷新页面。
效果图:
Stream.periodic构造,顾名思义,是用来创建流,在周期间隔反复广播事件。
import 'package:flutter/material.dart';
main()=>runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("StreamBuilder"),
centerTitle: true,
),
body: Center(
child: StreamBuilder<int>(
stream: _getNetWorkData(),
builder: (BuildContext context, AsyncSnapshot<int> snapshot){
if(snapshot.hasError){
return const Text("出错了");
}
switch(snapshot.connectionState){
case ConnectionState.none:
return const Text("没有 stream");
case ConnectionState.waiting:
return const Text("等待数据......");
case ConnectionState.active:
return Text("active: ${snapshot.data}");
case ConnectionState.done:
return const Text("Stream 已经关闭");
}
}),
)
),
);
}
}
Stream<int> _getNetWorkData() {
return Stream.periodic(const Duration(seconds: 1),(i){
return i;
});
}
深入理解BuildStream,我们将要构建的应用程序的背景颜色会随着时间而变化。它还在屏幕中央显示递增的数字。我们可以通过按下浮动按钮来阻止这些无情的行为。
代码例子:
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<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
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();
}
}
二、目标:使用FutureBuilder构建,等待网络请求回来的数据,显示到页面,还没有拿到数据前,显示loading
效果图:
import 'package:flutter/material.dart';
main()=>runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("FutureBuilder"),
centerTitle: true,
),
body: Center(
child: FutureBuilder(
future: _getNetWorkData(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.connectionState==ConnectionState.done){
if(snapshot.hasError){
return const Text("请求失败!");
}else{
return Text("content: ${snapshot.data}");
}
}else{
//请求未结束。显示loading
return const CircularProgressIndicator();
}
}),
)
),
);
}
}
Future _getNetWorkData() {
return Future.delayed(const Duration(seconds: 1),(){
return "从网络获取到的数据";
});
}
文章评论