优雅的使用 FutureBuilder and StreamBuilder 构建项目

栏目: IT技术 · 发布时间: 4年前

内容简介:本篇文章将介绍从首页,我们使用基础的

优雅的使用 FutureBuilder and StreamBuilder 构建项目

本篇文章将介绍从 setState 开始,到 futureBuilderstreamBuilder 来优雅的构建你的项目,而不引发 setState 带来的副作用,如对文章感兴趣,请 点击查看源码

基础的setState更新数据

首页,我们使用基础的 StatefulWidget 来创建页面,如下:

class BaseStatefulDemo extends StatefulWidget {
  @override
  _BaseStatefulDemoState createState() => _BaseStatefulDemoState();
}

class _BaseStatefulDemoState extends State<BaseStatefulDemo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

然后,我们使用 Future 来创建一些数据,来模拟网络请求,如下:

Future<List<String>> _getListData() async {
  await Future.delayed(Duration(seconds: 1)); // 1秒之后返回数据
  return List<String>.generate(10, (index) => '$index content');
}

initState() 方法中调用 _getListData() 来初始化数据,如下:

List<String> _pageData = List<String>();

@override
void initState() {
  _getListData().then((data) => setState(() {
            _pageData = data;
          }));
  super.initState();
}

使用 ListView.builder 来处理这些数据构建UI,如下:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Base Stateful Demo'),
    ),
    body: ListView.builder(
      itemCount: _pageData.length,
      itemBuilder: (buildContext, index) {
        return Column(
          children: <Widget>[
            ListTile(
              title: Text(_pageData[index]),
            ),
            Divider(),
          ],
        );
      },
    ),
  );
}

最后,我们就可以看到界面了 :sunglasses: ,如图:

优雅的使用 FutureBuilder and StreamBuilder 构建项目

当然,你也可以将 UI 显示单独提取成一个方法,方便后期维护,使代码层次更清晰,如下:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Base Stateful Demo'),
    ),
    body: ListView.builder(
      itemCount: _pageData.length,
      itemBuilder: (buildContext, index) {
        return getListDataUi(int index);
      },
    ),
  );
}

Widget getListDataUi(int index) {
  return Column(
              children: <Widget>[
                ListTile(
                  title: Text(_pageData[index]),
                ),
                Divider(),
              ],
            );
}

继续,我们来完善它,正常从后端获取数据,后端应该会给我们返回不同的状态,以及数据加载中的状态,如:

  • BusyState(加载中):我们在界面上显示一个加载指示器
  • DataFetchedState(数据加载完成):我们延迟2秒,来模拟数据加载完成
  • ErrorState(错误):显示错误提示
  • NoData(没有数据):请求成功,但没有数据,显示提示

先来处理 BusyState 加载指示器,如下:

bool get _fetchingData => _pageData == null; // 判断数据是否为空

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Base Stateful Demo'),
      ),
      body: _fetchingData
          ? Center(
              child: CircularProgressIndicator( // 加载指示器 
                valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow), // 设置指示器颜色
                backgroundColor: Colors.yellow[100],  // 设置背景色
              ),
            )
          : ListView.builder(
              itemCount: _pageData.length,
              itemBuilder: (buildContext, index) {
                return getListDataUi(index);
              },
            ),
    );
  }

效果如图:

优雅的使用 FutureBuilder and StreamBuilder 构建项目

接着,我们来处理 ErrorState ,我给 _getListData() 添加 hasError 参数来模拟后端,如下

Future<List<String>> _getListData({bool hasError = false}) async {
  await Future.delayed(Duration(seconds: 1)); // 1秒之后返回数据

  if (hasError) {
    return Future.error('获取数据出现问题,请再试一次');
  }

  return List<String>.generate(10, (index) => '$index content');
}

然后,在 initState() 方法中捕获异常更新数据,如下:

@override
void initState() {
  _getListData(hasError: true)
      .then((data) => setState(() {
            _pageData = data;
          }))
      .catchError((error) => setState(() {
            _pageData = [error];
          }));
  super.initState();
}

效果如图( 当然这里可以使用一个错误页面来展示 ):

优雅的使用 FutureBuilder and StreamBuilder 构建项目

接着,我们来处理 NoData ,我给 _getListData() 添加 hasError 参数来模拟后端,如下:

Future<List<String>> _getListData(
    {bool hasError = false, bool hasData = true}) async {
  await Future.delayed(Duration(seconds: 1));

  if (hasError) {
    return Future.error('获取数据出现问题,请再试一次');
  }

  if (!hasData) {
    return List<String>();
  }

  return List<String>.generate(10, (index) => '$index content');
}

然后,在 initState() 方法更新数据,如下:

@override
void initState() {
  _getListData(hasError: false, hasData: false)
      .then((data) => setState(() {
            if (data.length == 0) {
              data.add('No data fount');
            }
            _pageData = data;
          }))
      .catchError((error) => setState(() {
            _pageData = [error];
          }));
  super.initState();
}

效果如图:

优雅的使用 FutureBuilder and StreamBuilder 构建项目

这就是通过 setState() 来更新数据,是不是很简单,通常情况下我们这么使用是没什么问题,但是,如果我们的页面足够复杂,要处理的状态足够多,我们需要使用更多的 setState() ,意味着我们需要更多的代码来更新数据,而且,我们每次 setState() 的时候 build() 方法就会重新执行一次( 这就是上文提到的副作用 )。

其实, Flutter 已经提供了更优雅的方式来更新我们的数据及处理状态,它就是我们接下来要讲的 futureBuilder

FutureBuilder

FutureBuilder 通过 future: 参数可以接收一个 Future ,并且通过 builder: 参数来构建 UIbuilder: 参数是一个函数,它提供了一个 snapshot 参数里面带着我们需要的状态和数据。

接下来,我们将上面的 StatefulWidget 改成 StatelessWidget ,并使用 FutureBuilder 替换,如下:

class FutureBuilderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Future Builder Demo'),
      ),
      body: FutureBuilder(
        future: _getListData(),
        builder: (buildContext, snapshot) {
          if (snapshot.hasError) {
            return _getInfoMessage(snapshot.error);
          }

          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
                backgroundColor: Colors.yellow[100],
              ),
            );
          }
          var listData = snapshot.data;
          if (listData.length == 0) {
            return _getInfoMessage('No data found');
          }

          return ListView.builder(
            itemCount: listData.length,
            itemBuilder: (buildContext, index) {
              return Column(
                children: <Widget>[
                  ListTile(
                    title: Text(listData[index]),
                  ),
                  Divider(),
                ],
              );
            },
          );
        },
      ),
    );
  }

  ...

我们使用 _getInfoMessage() 方法来处理状态提示,如下:

Widget _getInfoMessage(String msg) {
  return Center(
    child: Text(msg),
  );
}

就这样我们不使用任何一个 setState() 就能完成和上面一样的效果,并且不会产生副作用,是不是很给力 :muscle:。

但是,它并不是完美的,比如,我们想刷新数据,我们需要重新调用 _getListData() 方法,结果它并没有刷新。

StreamBuilder

StreamBuilder 通过 stream: 参数可以接收一个 stream ,同样,通过 builder: 参数来构建 UI ,和 futureBuilder 用法类似,唯一的好处就是,我们可以随意控制 stream 的输入输出,添加任何的状态来更新指定状态下的 UI

首先,我们使用 enum 来表示我们的状态,在文件的头部添加它,如下:

enum StreamViewState { Busy, DataRetrieved, NoData }

接着,使用 StreamController 创建一个流控制器,把 FutureBuilder 替换成 StreamBuilder ,把 future: 参数 改成 stream: 参数,如下:

final StreamController<StreamDemoState> _stateController = StreamController<StreamDemoState>();

@override
  Widget build(BuildContext context) {
    return Scaffold(

      ...

      body: StreamBuilder(
        stream: model.homeState,
        builder: (buildContext, snapshot) {
          if (snapshot.hasError) {
            return _getInfoMessage(snapshot.error);
          }
          // 使用 枚举的 Busy 来更新数据
          if (!snapshot.hasData || StreamViewState.Busy) {
            return Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
                backgroundColor: Colors.yellow[100],
              ),
            );
          }
          //使用 枚举的 NoData 来更新数据
          if (listItems.length == StreamViewState.NoData) {
            return _getInfoMessage('No data found');
          }

          return ListView.builder(
            itemCount: listItems.length,
            itemBuilder: (buildContext, index) {
              return Column(
                children: <Widget>[
                  ListTile(
                    title: Text(listItems[index]),
                  ),
                  Divider(),
                ],
              );
            },
          );
        },
      ),
    );
  }

只是新增了枚举值来判断是否需要更新数据,其他基本保持不变。

接下来,我需要修改 _getListData() 方法,使用流控制器添加状态及数据,如下:

Future _getListData({bool hasError = false, bool hasData = true}) async {
  _stateController.add(StreamViewState.Busy);
  await Future.delayed(Duration(seconds: 2));

  if (hasError) {
    return _stateController.addError('error'); // 往 stream 里新增 error 数据
  }

  if (!hasData) {
    return _stateController.add(StreamViewState.NoData); // 往 stream 里新增无数据状态
  }

  _listItems = List<String>.generate(10, (index) => '$index content');
  _stateController.add(StreamViewState.DataRetrieved); // 往 stream 里新增数据获取完成状态
}

此时我们并没有返回数据,所以我们需要创建 listItems 存储数据,然后把 StatelessWidget 改成 StatefulWidget ,以便我们根据 stream 的输出来更新数据,这个转换非常方便, VS Code 编辑器可以使用 Option + Shift + R (Mac)或者 Ctrl + Shift + R (Win)快捷键 , Android Studio 使用 Option + Enter 快捷键,之后在 initState() 方法中初始化数据,如下:

List<String> listItems;

@override
void initState() {
  _getListData();
  super.initState();
}

到这里我们已经解决了 FutureBuilder 的局限性问题,我们可以新增一个 FloatingActionButton 来刷新数据,如下:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Builder Demo'),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow,
        child: Icon(
          Icons.cached,
          color: Colors.black87,
        ),
        onPressed: () {
          model.dispatch(FetchData());
        },
      ),
      body: StreamBuilder(

        ...
        
      ),
    );
  }

现在,我们的 listItems 数据并没真正的更新,点击 FloatingActionButton 只是更新的加载状态而已,而且我们的业务逻辑代码和 UI 代码还在同一个文件中,但是,他们已经解耦,所以,我们可以继续完善它,将业务逻辑代码和 UI 代码分离出来。

分离业务逻辑代码和UI代码

我们可以把处理 stream 的代码抽离成一个类,如下:

import 'dart:async';
import 'dart:math';

import 'package:pro_flutter/demo/stream_demo/stream_demo_event.dart';
import 'package:pro_flutter/demo/stream_demo/stream_demo_state.dart';


enum StreamViewState { Busy, DataRetrieved, NoData }

class StreamDemoModel {
  final StreamController<StreamDemoState> _stateController = StreamController<StreamDemoState>();

  List<String> _listItems;

  Stream<StreamDemoState> get streamState => _stateController.stream;

  void dispatch(StreamDemoEvent event){
    print('Event dispatched: $event');
    if(event is FetchData) {
      _getListData(hasData: event.hasData, hasError: event.hasError);
    }
  }

  Future _getListData({bool hasError = false, bool hasData = true}) async {
    _stateController.add(BusyState());
    await Future.delayed(Duration(seconds: 2));

    if (hasError) {
      return _stateController.addError('error');
    }

    if (!hasData) {
      return _stateController.add(DataFetchedState(data: List<String>()));
    }

    _listItems = List<String>.generate(10, (index) => '$index content');
    _stateController.add(DataFetchedState(data: _listItems));
  }
}

然后,把状态也封装成一个文件且将数据和状态关联,如下:

class StreamDemoState{}

class InitializedState extends StreamDemoState {}

class DataFetchedState extends StreamDemoState {
  final List<String> data;

  DataFetchedState({this.data});

  bool get hasData => data.length > 0;
}

class ErrorState extends StreamDemoState{}

class BusyState extends StreamDemoState{}

再封装一个事件文件,如下:

class StreamDemoEvent{}

class FetchData extends StreamDemoEvent{
  final bool hasError;
  final bool hasData;

  FetchData({this.hasError = false, this.hasData = true});

  @override
  String toString() {
    return 'FetchData { hasError: $hasError, hasData: $hasData }';
  }
}

最后,我们 UI 部分的代码如下:

class _StreamBuilderDemoState extends State<StreamBuilderDemo> {
  final model = StreamDemoModel(); // 创建 model

  @override
  void initState() {
    model.dispatch(FetchData(hasData: true)); // 获取 model 里的数据
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      ...

      body: StreamBuilder(
        stream: model.streamState,
        builder: (buildContext, snapshot) {
          if (snapshot.hasError) {
            return _getInformationMessage(snapshot.error);
          }

          var streamState = snapshot.data;

          if (!snapshot.hasData || streamState is BusyState) {  // 通过封装的状态类来判断是否更新UI
            return Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
                backgroundColor: Colors.yellow[100],
              ),
            );
          }

          if (streamState is DataFetchedState) { // 通过封装的状态类来判断是否更新UI
            if (!homeState.hasData) {
              return _getInformationMessage('not found data');
            }
          }
          return ListView.builder(
            itemCount: streamState.data.length,  // 此时,数据不再是本地数据,而是从 stream 中输出的数据
            itemBuilder: (buildContext, index) =>
                _getListItem(index, streamState.data),
          );
        },
      ),
    );
  }

  ...

}

此时,业务逻辑代码和 UI 代码已完全分离,且可扩展性和维护增强。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从界面到网络空间

从界面到网络空间

(美)海姆 / 金吾伦/刘钢 / 上海科技教育出版社 / 2000-7 / 16.40元

计算机急剧改变了20世纪的生活。今天,我们凭借遍及全球的计算机网络加速了过去以广播、报纸和电视形式进行的交流。思想风驰电掣般在全球翻飞。仅在角落中潜伏着已完善的虚拟实在。在虚拟实在吕,我们能将自己沉浸于感官模拟,不仅对现实世界,也对假想世界。当我们开始在真实世界与虚拟世界之间转换时,迈克尔·海姆问,我们对实在的感觉如何改变?在〈从界面到网络空间〉中,海姆探讨了这一问题,以及信息时代其他哲学问题。他......一起来看看 《从界面到网络空间》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具