脚本宝典收集整理的这篇文章主要介绍了Flutter 项目实战(Dio+MVP+FutureBuilder )五,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
/ 没有感情万千 、只有默默无闻 /
2022年跨年了,又涨了一岁。随着时光的流逝,工作多年的我还是在坚持些代码。互联网都有所谓的大龄危机,我对此毫无畏惧。不要因为社会存在一些大龄危机的恐慌,产生了很多心理上的负担 ,我虽然不再年少轻狂,但激情依旧。
你需要懂的法则就是 : 适者生存,优胜劣汰 。
你朝思暮想的结果就是 : 冰冻三尺,非一日之寒 。
你想太多的结果就是 : 还是在原点 , 人老了 , 留下的不是遗憾就是回忆 。
................
/ 异步 UI 更新FutureBuilder /
当我们打开app在网络畅通的情况下从服务器获取数据 , 同时获取数据需要时间 ,这时我们需要一个可以体现数据请求过程的进度条 , 获取到数据后渲染页面 。
FutureBuilder 是继承自 StatefulWidget builder必须要有返回值 , 不能为空。
const FutureBuilder({
Key? key,
this.future,
this.initialData,
required this.builder,
}) : assert(builder != null),
super(key: key);
final Future<T>? future;
/// The asynchronous computation to which this builder is currently connected,
/// possibly null.
///
/// If no future has yet completed, including in the case where [future] is
/// null, the data provided to the [builder] will be set to [initialData].
builder 与异步请求建立的连接 (connected) 可能为空 (即future参数可能为空) 。如果异步请求没有完成 , 包括future参数为空 ,那么就提供默认数据(initialData) 给 builder使用 。
当future 不为空时
class _MyHomePageState extends State<MyHomePage> {
var _futBuiHom;
void _handleGetNetData() async {
await _getNetData();
setState(() {});
}
Future<String> _getNetData() async {
return await Future.delayed(Duration(seconds: 2), () => "从互联网上获取的数据111111");
}
@override
void initState() {
// TODO: implement initState
super.initState();
_futBuiHom = _getNetData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FutureBuilder<dynamic>(
future: _futBuiHom,
initialData: '初始化的数据',
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
print('n获取到到数据: State${snapshot.connectionState} n data${snapshot.data}');
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return const Text('数据加载中.....'); //加载中
default: //如果_calculation执行完毕
if (snapshot.hasError) {
//若_calculation执行出现异常
return Text('Error: ${snapshot.hasError}');
} else {
//若_calculation执行正常完成
return Text('Error: ${snapshot.data}');
}
}
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: _handleGetNetData,
tooltip: '模拟从网络获取数据',
child: Icon(Icons.add),
),
);
}
}
当Future 为空时
final AsyncWidgetBuilder<T> builder;
/// The build strategy currently used by this builder.
///
/// The builder is provided with an [AsyncSnapshot] object whose
/// [AsyncSnapshot.connectionState] property will be one of the following
/// values:
///
/// * [ConnectionState.none]: [future] is null. The [AsyncSnapshot.data] will
/// be set to [initialData], unless a future has previously completed, in
/// which case the previous result persists.
///
/// * [ConnectionState.waiting]: [future] is not null, but has not yet
/// completed. The [AsyncSnapshot.data] will be set to [initialData],
/// unless a future has previously completed, in which case the previous
/// result persists.
///
/// * [ConnectionState.done]: [future] is not null, and has completed. If the
/// future completed successfully, the [AsyncSnapshot.data] will be set to
/// the value to which the future completed. If it completed with an error,
/// [AsyncSnapshot.hasError] will be true and [AsyncSnapshot.error] will be
/// set to the error object.
///
/// This builder must only return a widget and should not have any side
/// effects as it may be called multiple times.
builder提供了一个AsyncSnapshot 对象 , 该对象可以获取异步请求的状态 。
必须返回一个Widget , 因为builder 函数会被调用多次 。
awaiting状态下显示异步请求进度条 。
done 状态下 , 如果hasError 为false , 就重新渲染Widget 。
final T? initialData
/// The data that will be used to create the snapshots provided until a
/// non-null [future] has completed.
///
/// If the future completes with an error, the data in the [AsyncSnapshot]
/// provided to the [builder] will become null, regardless of [initialData].
/// (The error itself will be available in [AsyncSnapshot.error], and
/// [AsyncSnapshot.hasError] will be true.)
FutureBuilder 初始化数据 . 当future参数不为空 (存在异步请求时) , 异步请求完成后 builder 函数将会被回调 .
/ FutureBuilder 源码讲解/
开始订阅 (异步获取数据)
void _subscribe() {
if (widget.future != null) {
final Object callbackIdentity = Object();
_activeCallbackIdentity = callbackIdentity;
widget.future!.then<void>((T data) {
if (_activeCallbackIdentity == callbackIdentity) {
setState(() {
_snapshot = AsyncSnapshot<T>.withData(ConnectionState.done, data);
});
}
}, onError: (Object error, StackTrace stackTrace) {
if (_activeCallbackIdentity == callbackIdentity) {
setState(() {
_snapshot = AsyncSnapshot<T>.withError(ConnectionState.done, error, stackTrace);
});
}
});
_snapshot = _snapshot.inState(ConnectionState.waiting);
}
}
当父视图调用 setState 函数时,子视图的 didUpdateWidget 函数被调用 . 如果 future 的值直接引用获取数据的异步函数, 那么builder 对应的函数要被调用多次 .
class _MyHomePageState extends State<MyHomePage> {
var _futBuiHom;
void _handleGetNetData() async {
await _getNetData();
setState(() {});
}
Future<String> _getNetData() async {
return await Future.delayed(Duration(seconds: 2), () => "从互联网上获取的数据111111");
}
@override
void initState() {
// TODO: implement initState
super.initState();
_futBuiHom = _getNetData();
}
@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
print('didUpdateWidget');
}
@override
Widget build(BuildContext context) {
print('build(BuildContext context)');
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FutureBuilder<dynamic>(
future: _getNetData(),
initialData: '初始化的数据',
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
print('n获取到到数据: State${snapshot.connectionState} n data${snapshot.data}');
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return const Text('数据加载中.....'); //加载中
default: //如果_calculation执行完毕
if (snapshot.hasError) {
//若_calculation执行出现异常
return Text('Error: ${snapshot.hasError}');
} else {
//若_calculation执行正常完成
return Text('Error: ${snapshot.data}');
}
}
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: _handleGetNetData,
tooltip: '模拟从网络获取数据',
child: Icon(Icons.add),
),
);
}
}
在FutureBuilder 状态管理类 _FutureBuilderState 的 didUpdateWidget 打印 当前future和上一次的future实例是否一样 .
结果显示不一样
所以为了让每次异步请求的实例是同一个 future ,需要在Widget 创建时在initState 函数里面初始化异步请求的future , 每次FutureBuilder 重新构建时都从原来的future异步请求中获取数据. var _futBuiHom;
Future<String> _getNetData() async {
return await Future.delayed(Duration(seconds: 2), () => "从互联网上获取的数据111111");
}
@override
void initState() {
// TODO: implement initState
super.initState();
_futBuiHom = _getNetData();
}
每次调用setState刷新界面
void _handleGetNetData() async {
await _getNetData();
setState(() {});
}
/ FutureBuilder + Dio +MVP 实现网络请求 /
Flutter 项目实战 Dio网络请求 四
import 'dart:collection';
import 'dart:core';
import 'package:connectivity/connectivity.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'http_error.dart';
///http请求成功回调
typedef HttpSuccessCallback<T> = void Function(dynamic data);
///失败回调
typedef HttpFailureCallback = void Function(HttpError data);
///数据解析回调
typedef T JsonParse<T>(dynamic data);
class HttpManager {
///同一个CancelToken可以用于多个请求,当一个CancelToken取消时,
///所有使用该CancelToken的请求都会被取消,一个页面对应一个CancelToken。
Map<String, CancelToken> _cancelTokens = Map<String, CancelToken>();
///超时时间
static const int CONNECT_TIMEOUT = 30000;
static const int RECEIVE_TIMEOUT = 30000;
/// http request methods
static const String GET = 'get';
static const String POST = 'post';
Dio? _client;
static final HttpManager _instance = HttpManager._internal();
factory HttpManager() => _instance;
Dio get client => _client!;
/// 创建 dio 实例对象
HttpManager._internal() {
if (_client == null) {
/// 全局属性:请求前缀、连接超时时间、响应超时时间
BaseOptions options = BaseOptions(
connectTimeout: CONNECT_TIMEOUT,
receiveTimeout: RECEIVE_TIMEOUT,
);
_client = Dio(options);
}
}
///初始化公共属性
/// [baseUrl] 地址前缀
/// [connectTimeout] 连接超时赶时间
/// [receiveTimeout] 接收超时赶时间
/// [interceptors] 基础拦截器
void init(
{String? baseUrl,
int? connectTimeout,
int? receiveTimeout,
List<Interceptor>? interceptors}) {
_client!.options = _client!.options.copyWith(
baseUrl: baseUrl,
connectTimeout: connectTimeout,
receiveTimeout: receiveTimeout,
);
if (interceptors != null && interceptors.isNotEmpty) {
_client!.interceptors..addAll(interceptors);
}
}
///Get网络请求
///[url] 网络请求地址不包含域名
///[params] url请求参数支持restful
///[options] 请求配置
///[successCallback] 请求成功回调
///[errorCallback] 请求失败回调
///[tag] 请求统一标识,用于取消网络请求
get({
String? url,
Map<String, dynamic>? params,
Options? options,
HttpSuccessCallback? successCallback,
HttpFailureCallback? errorCallback,
String? tag,
}) async {
return _request(
url: url,
params: params,
method: GET,
options: options,
successCallback: successCallback!,
errorCallback: errorCallback!,
tag: tag!,
);
}
///post网络请求
///[url] 网络请求地址不包含域名
///[data] post 请求参数
///[params] url请求参数支持restful
///[options] 请求配置
///[successCallback] 请求成功回调
///[errorCallback] 请求失败回调
///[tag] 请求统一标识,用于取消网络请求
post({
String? url,
data,
Map<String, dynamic>? params,
Options? options,
HttpSuccessCallback? successCallback,
HttpFailureCallback? errorCallback,
@required String? tag,
}) async {
return _request(
url: url!,
data: data,
method: POST,
params: params!,
options: options!,
successCallback: successCallback!,
errorCallback: errorCallback!,
tag: tag!,
);
}
///统一网络请求
///[url] 网络请求地址不包含域名
///[data] post 请求参数
///[params] url请求参数支持restful
///[options] 请求配置
///[successCallback] 请求成功回调
///[errorCallback] 请求失败回调
///[tag] 请求统一标识,用于取消网络请求
_request({
String? url,
String? method,
data,
Map<String, dynamic>? params,
Options? options,
HttpSuccessCallback? successCallback,
HttpFailureCallback? errorCallback,
@required String? tag,
}) async {
//检查网络是否连接
ConnectivityResult connectivityResult =
await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.none) {
if (errorCallback != null) {
errorCallback(HttpError(HttpError.NETWORK_ERROR, "网络异常,请稍后重试!"));
}
return;
}
//设置默认值
params = params ?? {};
method = method ?? 'GET';
options?.method = method;
options = options ??
Options(
method: method,
);
///请求头
options.headers = await _headers();
try {
CancelToken cancelToken;
cancelToken =
(_cancelTokens[tag] == null ? CancelToken() : _cancelTokens[tag])!;
_cancelTokens[tag!] = cancelToken;
Response response = await _client!.request(url!,
data: data,
queryParameters: params,
options: options,
cancelToken: cancelToken);
var _responseData = response.data;
print('相应数据:$_responseData');
return _responseData;
/*int statusCode = _responseData["code"];
if (statusCode == 200) {
//成功
successCallback!(_responseData["data"]);
} else {
//失败
String message = _responseData["msg"].toString();
errorCallback!(HttpError('$statusCode', message));
}*/
} on DioError catch (e, s) {
if (e.type != DioErrorType.cancel) {
errorCallback!(HttpError.dioError(e));
}
} catch (e, s) {
errorCallback!(HttpError(HttpError.UNKNOWN, "未知错误,请稍后重试!"));
}
}
///取消网络请求
void cancel(String tag) {
if (_cancelTokens.containsKey(tag)) {
if (!_cancelTokens[tag]!.isCancelled) {
_cancelTokens[tag]!.cancel();
}
_cancelTokens.remove(tag);
}
}
///请求头
Future<Map<String, String>> _headers() async {
Map<String, String> _headers = new HashMap();
String _token = '';
_headers.addAll({"token": _token});
return _headers;
}
}
MVP 模式 - 模型层 - 基础类
创建IModel
import 'package:flutter_dio_mvp_futurebuilder/base/http/http_error.dart';
abstract class IModel {
///释放网络请求
void dispose();
}
typedef SuccessCallback<T> = void Function(dynamic data);
typedef FailureCallback = void Function(HttpError error);
AbstractModel
import 'IModel.dart';
abstract class AbstractModel implements IModel {
String? _tag;
String? get tag => _tag;
AbstractModel() {
_tag = '${DateTime.now().millisecondsSinceEpoch}';
}
}
MVP模式 - Presenter基础类
IPresenter
import 'package:flutter_dio_mvp_futurebuilder/base/view/IView.dart';
abstract class IPresenter<V extends IView> {
void attachView(V view);
void detachView();
}
AbstractPresenter
import 'package:flutter_dio_mvp_futurebuilder/base/model/IModel.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/view/IView.dart';
import 'IPresenter.dart';
abstract class AbstractPresenter<V extends IView , M extends IModel >
implements IPresenter {
M? _model;
V? _view;
@override
void attachView(IView view) {
this._model = createModel() as M?;
this._view = view as V?;
}
@override
void detachView() {
if (_view != null) {
_view = null;
}
if (_model != null) {
_model!.dispose();
_model = null;
}
}
V? get view {
return _view;
}
// V get view => _view;
M? get model => _model;
IModel createModel();
}
IView
class IView {
///开始加载
void startLoading() {}
///加载成功
void showLoadSuccess() {}
///加载失败
void showLoadFailure(String code, String message) {}
}
BaseView
import 'package:flutter/material.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/presenter/IPresenter.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/view/IView.dart';
abstract class BaseView extends StatefulWidget {
BaseView({Key? key}) : super(key: key);
@override
BaseViewState createState() => getState();
///子类实现
BaseViewState getState();
}
abstract class BaseViewState<P extends IPresenter, V extends BaseView>
extends State<V> with IView {
P? presenter;
@override
void initState() {
super.initState();
presenter = createPresenter();
if (presenter != null) {
presenter?.attachView(this);
}
}
P? createPresenter() {}
@override
Widget build(BuildContext context) {
return Scaffold(
///导航栏
appBar: buildAppBar(),
///内容区域
body: buildWidget(),
///内容区域背景颜色
backgroundColor: buildBodyColor(),
);
}
buildWidget();
buildAppBar() => null;
Color buildBodyColor() {
return Color(0xff00FFFFFF);
}
}
创建用于业务逻辑处理的callback
import 'package:flutter_dio_mvp_futurebuilder/base/model/IModel.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/presenter/IPresenter.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/view/IView.dart';
abstract class CDataModel extends IModel {
///
loadData(Map<String, dynamic> p, SuccessCallback s, FailureCallback f);
}
abstract class CDataPresenter extends IPresenter {
///
loadData(Map<String, dynamic> p);
}
abstract class CDataView extends IView {
///
loadData(d);
}
模型层(Model)、Presenter、视图层(View) 的具体实现
模型层(Model) 实现
import 'package:flutter_dio_mvp_futurebuilder/base/http/http_manager.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/model/AbstractModel.dart';
import 'package:flutter_dio_mvp_futurebuilder/busmer/mvp_callback.dart';
class MData extends AbstractModel implements CDataModel {
@override
void dispose() {
// TODO: implement dispose
HttpManager().cancel(tag!);
}
@override
loadData(Map<String, dynamic> p, s, f) async{
return HttpManager().get(
///网络请求地址
url: '/f',
tag: tag!,
successCallback: (data) {
s(data);
},
errorCallback: (data) {
f(data);
},
params: p);
}
}
Presenter 实现
import 'package:flutter_dio_mvp_futurebuilder/base/model/IModel.dart';
import 'package:flutter_dio_mvp_futurebuilder/base/presenter/AbstractPresenter.dart';
import 'package:flutter_dio_mvp_futurebuilder/busmer/mvp_callback.dart';
import 'package:flutter_dio_mvp_futurebuilder/model/m_data.dart';
class PData extends AbstractPresenter<CDataView, CDataModel>
implements CDataPresenter {
@override
IModel createModel() {
return MData();
}
@override
loadData(Map<String, dynamic> p) async{
// TODO: implement loadData
view?.startLoading();
return model?.loadData(p, (data) {
view?.showLoadSuccess();
view?.loadData(data);
model?.dispose();
}, (error) {
view?.showLoadFailure(error.code!, error.message!);
});
}
}
视图层(View) 实现
class MyHomePage extends BaseView {
@override
BaseViewState<IPresenter<IView>, BaseView> getState() {
// TODO: implement getState
return _MyHomePageState();
}
}
class _MyHomePageState extends BaseViewState<PData, MyHomePage>
implements CDataView {
var _futBuiHom;
void _handleGetNetData() async {
await _getNetData();
setState(() {});
}
_getNetData() async {
return await presenter!
.loadData({'ie': 'utf-8', 'kw': '大佬', 'fr': 'search'});
}
@override
void initState() {
// TODO: implement initState
super.initState();
_futBuiHom = _getNetData();
}
@override
loadData(d) {}
@override
PData? createPresenter() {
// TODO: implement createPresenter
return PData();
}
@override
Color buildBodyColor() {
// TODO: implement buildBodyColor
return Color(0xffFFFFFF);
}
@override
buildWidget() {
// TODO: implement buildWidget
print('build(BuildContext context)');
return Column(
children: [
AppBar(
title: Text('FutureBuilder MVP Dio'),
),
OutlinedButton(
onPressed: _handleGetNetData,
child: Text('模拟从网络获取数据'),
),
Expanded(
flex: 1,
child: Center(
child: FutureBuilder<dynamic>(
future: _futBuiHom,
initialData: '初始化的数据',
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
print(
'n获取到到数据: State${snapshot.connectionState} n data${snapshot.data}');
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return const Text('数据加载中.....'); //加载中
default: //如果_calculation执行完毕
if (snapshot.hasError) {
//若_calculation执行出现异常
return Text('Error: ${snapshot.hasError}');
} else {
//若_calculation执行正常完成
return Text('Error: ${snapshot.data}');
}
}
},
),
),
),
],
);
}
}
main() 函数初始化网络请求 (网络请求需要的域名baseUrl)
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
await SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
///网络请求管理初始化
HttpManager().init(baseUrl: 'https://tieba.baidu.com');
runApp(MyApp());
}
发起了网络请求
总结
FutureBuilder 用于显示异步请求的数据, 避免数据请求多次调用builder 对应的函数 , 我们需要在Widget 创建时 State 函数 initState 里面进行异步请求的初始化 .
Future+Dio+MVP 案例下载
以上是脚本宝典为你收集整理的Flutter 项目实战(Dio+MVP+FutureBuilder )五全部内容,希望文章能够帮你解决Flutter 项目实战(Dio+MVP+FutureBuilder )五所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。