一、目标:使用StreamBuilder模拟实现每隔一秒返回从网络中获取的数据,并刷新页面。
效果图:
Stream.periodic构造,顾名思义,是用来创建流,在周期间隔反复广播事件。
<code>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; }); }</code>
深入理解BuildStream,我们将要构建的应用程序的背景颜色会随着时间而变化。它还在屏幕中央显示递增的数字。我们可以通过按下浮动按钮来阻止这些无情的行为。
代码例子:
<code>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(); } }</code>
二、目标:使用FutureBuilder构建,等待网络请求回来的数据,显示到页面,还没有拿到数据前,显示loading
效果图:
<code>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<String>( future: _getNetWorkData(), builder: (BuildContext context, AsyncSnapshot<String> snapshot){ if(snapshot.connectionState==ConnectionState.done){ if(snapshot.hasError){ return const Text("请求失败!"); }else{ return Text("content: ${snapshot.data}"); } }else{ //请求未结束。显示loading return const CircularProgressIndicator(); } }), ) ), ); } } Future<String> _getNetWorkData() { return Future.delayed(const Duration(seconds: 1),(){ return "从网络获取到的数据"; }); }</code>
文章评论