zoukankan      html  css  js  c++  java
  • flutter 刷新组件

    代码:

    import 'package:flutter/material.dart';
    import 'package:flutter_project/service/service_method.dart';
    import 'dart:convert';
    import 'swiper_demo.dart';
    import 'top_navigator.dart';
    import 'adbanner.dart';
    import 'callPhone.dart';
    import 'recommand.dart';
    import 'floor.dart';
    import 'hot_goods.dart';
    import 'package:flutter_easyrefresh/easy_refresh.dart';
    class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);

    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {//with 混入 AutomaticKeepAliveClientMixin保活 1.需要这个类继承 StatefulWidget 2.重写wantKeepAlive 并置为true 3.在此文件的父页面使用IndexedStack
    int pageIndex = 1; //页码
    GlobalKey<HotGoodsState> hotGoodsKey = new GlobalKey<HotGoodsState>();//不能使用_xxx声明的类 那是私有
    GlobalKey<RefreshFooterState> _footerStateKey = new GlobalKey<RefreshFooterState>();
    @override
    bool get wantKeepAlive => true;//保持页面效果 就是返回当前页面不重新加载
    @override
    void initState() {
    super.initState();
    print('11111');//不保活 就会重新加载 就会调用这个方法
    }

    @override
    Widget build(BuildContext context) {
     
    //设置key
    return Scaffold(
    appBar: AppBar(title: Text('百姓生活')),
    body: Container(
    child: FutureBuilder(//网络数据返回能很好的渲染控件
    future: getHomePageContent(),//网络返回的数据
     
     
    builder: (context,snapshot){
    if (snapshot.hasData) {//snapshot 相当于返回的数据
    var data = json.decode(snapshot.data.toString());

    List<Map> swiper = (data['data']['slides'] as List).cast();

    List<Map> navlist = (data['data']['category'] as List).cast();

    String adPic = data['data']['advertesPicture']['PICTURE_ADDRESS'];

    String phoneBgImage = data['data']['shopInfo']['leaderImage'];
     
    String phoneNum = data['data']['shopInfo']['leaderPhone'];

    List<Map> recommendList = (data['data']['recommend'] as List).cast();

    String floorTitle1 = data['data']['floor1Pic']['PICTURE_ADDRESS'];
    String floorTitle2 = data['data']['floor2Pic']['PICTURE_ADDRESS'];
    String floorTitle3 = data['data']['floor3Pic']['PICTURE_ADDRESS'];

    List<Map> floorContent1 = (data['data']['floor1'] as List).cast();
    List<Map> floorContent2 = (data['data']['floor2'] as List).cast();
    List<Map> floorContent3 = (data['data']['floor3'] as List).cast();
    return EasyRefresh(
    child: ListView(
    children: <Widget>[//各个组件
    SwiperDiy(swiperDataList: swiper),//轮播
    TopNavigator(navigatorList: navlist),//导航引导
    AdBanner(adPicture: adPic),//广告
    CallPhone(backgroundImage: phoneBgImage,shopPhone:phoneNum,),//打电话
    Recomend(recommendList: recommendList,),//推荐
    FloorTitle(picture_address: floorTitle1,),//楼层标题
    FloorContent(floorGoodsList:floorContent1),//楼层内容
    FloorTitle(picture_address: floorTitle2,),//楼层标题
    FloorContent(floorGoodsList:floorContent2),//楼层内容
    FloorTitle(picture_address: floorTitle3,),//楼层标题
    FloorContent(floorGoodsList:floorContent3),//楼层内容
     
    HotGoods(key: hotGoodsKey,),//热门商品
    ],
    ),
    loadMore: ()async{
    pageIndex++;
    hotGoodsKey.currentState.getHotGoods(pageIndex);
    },
    refreshFooter: ClassicsFooter(//刷新尾样式
    bgColor: Colors.white,
    textColor: Colors.pink,
    moreInfoColor: Colors.pink,//加载中的颜色
    showMore: true,
    noMoreText: '',//没有信息 设置为空
    moreInfo: '加载中',
    loadReadyText: '上拉加载',
    loadingText: '加载中',
    loadText: '下拉',
    key: _footerStateKey,
    ),
    );
    }else{
    return Center(
    child: Text('加载错误'),
    );
    }
    },
    ),
    ),
    );
    }
    }
    总结:

    //刷新组件

    使用外部类的方法 需要把这个类的方法 类型 定义成public 

    HotGoodsState createState() => HotGoodsState();//想要外面调用 得使用不带_

    在需要调用的类中 定义 globalKey

     GlobalKey<HotGoodsState>  hotGoodsKey = new GlobalKey<HotGoodsState>();//不能使用_xxx声明的类 那是私有

    HotGoods(key: hotGoodsKey,),//热门商品 需要定义的类中引入key

    hotGoodsKey.currentState.getHotGoods(pageIndex);//方法的调用

  • 相关阅读:
    VUE图片懒加载-vue lazyload插件的简单使用
    vuejs+axios发送请求
    Vue2.0+Node.js+MongoDB全栈打造商城系统
    Vue基础知识之vue-resource和axios
    vue-resource
    css3 转换 过渡 及动画
    css sticky footer布局
    vue 前端生成二维码 (带图标)
    微信小程序学习四
    tradingview绘制K线周期切换保留指标
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12235999.html
Copyright © 2011-2022 走看看