接口请求等待动画,请求失败,超时处理
import 'dart:async';
import 'package:demo/common_page/rpx.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HttpFailPage extends StatefulWidget {
final Function leadingClick;
const HttpFailPage({
Key? key, required this.leadingClick}) : super(key: key);
@override
State<HttpFailPage> createState() => _HttpFailPageState();
}
class _HttpFailPageState extends State<HttpFailPage> {
late Function leadingClick;
bool isRef = false;
late Timer t ;
// and later, before the timer goes off...
@override
void initState() {
// TODO: implement initState
super.initState();
leadingClick = widget.leadingClick;
}
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
// 延时5s执行返回,这里5秒可以设置成dio超时时间
t = Timer(const Duration(seconds: 5), (){
setState(() {
isRef = true;
});
// print('延时1s执行');
});
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
t.cancel();
}
@override
Widget build(BuildContext context) {
return isRef == true?Center(
child: Container(
padding: EdgeInsets.all(20.rpx),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.rpx),
border: Border.all(
color: Colors.white
.withOpacity(0.5))
),
child: InkWell(
onTap: (){
leadingClick();
},
child: Text("network_request_failed".tr,style: TextStyle(fontWeight: FontWeight.w700,fontSize: 30.rpx,color: Colors.blue),),
),
),
): Container(
alignment: Alignment.topCenter,
width: 80.rpx,
height: 80.rpx,
child: CircularProgressIndicator(backgroundColor: Color(0xff7BFB95),color: Color(0xff68CEFA),strokeWidth: 5.rpx,),
);
}
}
加了回调参数leadingClick,目的是为了防止接口请求失败,页面过了时间就显示失败回调UI。
数字后面的单位.rpx可以去掉,这是我适配用的单位,或者可以去我的博客引用这种适配