flutter 等待接口请求，失败重连

原创已于 2023-03-29 16:29:07 修改 · 739 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2022-12-14 18:55:21 首次发布

flutter 同时被 3 个专栏收录

14 篇文章

订阅专栏

ios

11 篇文章

订阅专栏

android

9 篇文章

订阅专栏

本文介绍了一个处理HTTP请求失败的方法，通过使用Flutter实现了一个带有等待动画的页面，在请求超时时显示失败提示并提供回调以重新尝试。

接口请求等待动画，请求失败，超时处理


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,),
    );
  }
}