Flutter 流式布局列表实例+上拉加载

其他 2019-09-29 16:31:31 阅读次数: 0

页面变化的几种方式：

一、StatefulWidget的setState形式

先声明两个变量。

int page = 1;
List<Map> list = [];

写了一个方法，获取数据：

void _getHotGoods(){
    var formData = {'page':page};
    request('post', 'homePageBelowConten',formData: formData).then((val){
      var data = json.decode(val.toString());
      List<Map> newList = (data['data'] as List).cast();
      setState(() {
        list.addAll(newList); //新的列表加到老的列表之上
        page ++;
      });
    });
  }

然后实现页面布局

标题：

//火爆专区标题 变量的形式
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top: 10.0),
    alignment: Alignment.center,
    color: Colors.transparent, //透明背景色
    padding: EdgeInsets.all(5.0),
    child: Text('火爆专区'),
  );

每个子项：

//火爆专区子项 方法的形式
  Widget _wrapList(){
    if(list.length != 0){
      List<Widget> listWidget = list.map((val){ //把Map类型的List包装成Widget，再放回List里，并赋值给流式布局
        return InkWell(
          onTap: (){},
          child: Container(
            width: ScreenUtil().setWidth(372),
            color: Colors.white,
            padding: EdgeInsets.all(5.0),
            margin: EdgeInsets.only(bottom: 3.0),
            child: Column(
              children: <Widget>[
                Image.network(val['image'],width:ScreenUtil().setWidth(370)),
                Text(
                  val['name'],
                  maxLines: 1,
                  overflow:TextOverflow.ellipsis,
                  style:TextStyle(color:Colors.blueGrey,fontSize:ScreenUtil().setSp(26)),
                ),
                Row(
                  children: <Widget>[
                    Text('￥${val['mallPrice']}'),
                    Text(
                      '￥${val['price']}',
                      style: TextStyle(color: Colors.black26,decoration: TextDecoration.lineThrough),
                    )
                  ],
                ),
              ],
            ),
          ),
        );
      }).toList(); //把Map类型的List包装成Widget，再放回List里，并赋值给流式布局

      return Wrap( //返回流式布局
        spacing: 2, //每行2列
        children: listWidget,
      );
    }else{
      return Text(''); //没有数据时返回空
    }
  }

组合在一起：

//火爆专区组合
  Widget _hotGoods(){
    return Container(
      child: Column(
        children: <Widget>[
          hotTitle,
          _wrapList(),
        ],
      ),
    );
  }

完整代码：

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CategoryPage extends StatefulWidget {

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  int page = 1;
  List<Map> list = [];

  @override
  void initState() { 
    super.initState();
    _getHotGoods(); //火爆专区获取值
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child:Column(
        children: <Widget>[
           _hotGoods(),
         ],
      ),      
    );
  }

  //火爆商品接口
  void _getHotGoods(){
    var formData = {'page':page}; //Map类型
    request('post', 'homePageBelowConten',formData: formData).then((val){
      var data = json.decode(val.toString());
      List<Map> newList = (data['data'] as List).cast();
      setState(() {
        list.addAll(newList); //新的列表加到老的列表之上
        page ++;
      });
    });
  }
  //火爆专区标题 变量的形式
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top: 10.0),
    alignment: Alignment.center,
    color: Colors.transparent, //透明背景色
    padding: EdgeInsets.all(5.0),
    child: Text('火爆专区'),
  );
  //火爆专区子项 方法的形式
  Widget _wrapList(){
    if(list.length != 0){
      List<Widget> listWidget = list.map((val){ //Map循环的形式：把Map类型的List包装成Widget，再放回List里，并赋值给流式布局
        return InkWell(
          onTap: (){},
          child: Container(
            width: ScreenUtil().setWidth(372),
            color: Colors.white,
            padding: EdgeInsets.all(5.0),
            margin: EdgeInsets.only(bottom: 3.0),
            child: Column(
              children: <Widget>[
                Image.network(val['image'],width:ScreenUtil().setWidth(370)),
                Text(
                  val['name'],
                  maxLines: 1,
                  overflow:TextOverflow.ellipsis,
                  style:TextStyle(color:Colors.blueGrey,fontSize:ScreenUtil().setSp(26)),
                ),
                Row(
                  children: <Widget>[
                    Text('￥${val['mallPrice']}'),
                    Text(
                      '￥${val['price']}',
                      style: TextStyle(color: Colors.black26,decoration: TextDecoration.lineThrough),
                    )
                  ],
                ),
              ],
            ),
          ),
        );
      }).toList(); //Map循环的形式：把Map类型的List包装成Widget，再放回List里，并赋值给流式布局

      return Wrap( //返回流式布局
        spacing: 2, //每行2列
        children: listWidget,
      );
    }else{
      return Text(''); //没有数据时返回空
    }
  }
  //火爆专区组合
  Widget _hotGoods(){
    return Container(
      child: Column(
        children: <Widget>[
          hotTitle,
          _wrapList(),
        ],
      ),
    );
  }

}

flutter_easyrefresh插件：

EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件，但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。

github：https://github.com/xuelongqy/flutter_easyrefresh

flutter_easyrefresh优点:

  • 能够自定义酷炫的Header和Footer，也就是上拉和下拉的效果。
  • 更新及时，不断在完善，录课截至时已经是v1.2.7版本了。
  • 有一个辅导群，虽然文档不太完善，但是有辅导群和详细的案例。
  • 回掉方法简单，这个具体可以看下面的例子。

引入依赖

直接在pubspec.yaml中的dependencies中进行引入，主要要用最新版本，文章中的版本不一定是最新版本。

flutter_easyrefresh: ^1.2.7

引入后，在要使用的页面用import引入package，代码如下：

import 'package:flutter_easyrefresh/easy_refresh.dart';

制作上拉加载效果

使用这个插件，要求我们必须是一个ListView，所以我们要改造以前的代码，SingleChildScrollView改造成ListView。并添加loadMore，把_getHotGoods的内容粘贴过来，

_getHotGoods();就可以注掉了。 
return EasyRefresh(
      child:ListView(
        children: <Widget>[
           _hotGoods(),
         ],
      ),
      loadMore: () async{
        var formData = {'page':page}; //Map类型
        await request('post', 'homePageBelowConten',formData: formData).then((val){
          var data = json.decode(val.toString());
          List<Map> newList = (data['data'] as List).cast();
          setState(() {
            list.addAll(newList); //新的列表加到老的列表之上
            page ++;
          });
        });
      },     
    );

现在运行已经可以看到效果了，不过还需要修改下。

自定义上拉加载效果

因为它自带的样式是蓝色的，与我们的界面不太相符，所以我们改造一下，它的底部上拉刷新效果。如果你有兴趣做出更炫酷的效果，可以自行查看一下Github，学习一下。

    refreshFooter:ClassicsFooter( //自定义上拉加载效果
           key:_footerKey,
           bgColor:Colors.white,
           textColor: Colors.blueGrey,
           moreInfoColor: Colors.blueGrey,
           showMore: true,
           noMoreText: '',
           moreInfo: '加载中', //加载时显示的文字
           loadReadyText: '上拉加载...', //准备时显示的文字
         ),

还要在上面定义Key：

GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); //定义key

完整代码：

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

class CategoryPage extends StatefulWidget {

  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  int page = 1;
  List<Map> list = [];

  GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); //定义key

  @override
  void initState() { 
    super.initState();
    //_getHotGoods(); //火爆专区获取值
  }

  @override
  Widget build(BuildContext context) {
    return EasyRefresh(
      refreshFooter:ClassicsFooter( //自定义上拉加载效果
           key:_footerKey,
           bgColor:Colors.white,
           textColor: Colors.blueGrey,
           moreInfoColor: Colors.blueGrey,
           showMore: true,
           noMoreText: '',
           moreInfo: '加载中', //加载时显示的文字
           loadReadyText: '上拉加载...', //准备时显示的文字
      ),
      child:ListView(
        children: <Widget>[
           _hotGoods(),
         ],
      ),
      loadMore: () async{
        var formData = {'page':page}; //Map类型
        await request('post', 'homePageBelowConten',formData: formData).then((val){
          var data = json.decode(val.toString());
          List<Map> newList = (data['data'] as List).cast();
          setState(() {
            list.addAll(newList); //新的列表加到老的列表之上
            page ++;
          });
        });
      },     
    );
  }

  //火爆商品接口
  // void _getHotGoods(){
  //   var formData = {'page':page}; //Map类型
  //   request('post', 'homePageBelowConten',formData: formData).then((val){
  //     var data = json.decode(val.toString());
  //     List<Map> newList = (data['data'] as List).cast();
  //     setState(() {
  //       list.addAll(newList); //新的列表加到老的列表之上
  //       page ++;
  //     });
  //   });
  // }
  //火爆专区标题 变量的形式
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top: 10.0),
    alignment: Alignment.center,
    color: Colors.transparent, //透明背景色
    padding: EdgeInsets.all(5.0),
    child: Text('火爆专区'),
  );
  //火爆专区子项 方法的形式
  Widget _wrapList(){
    if(list.length != 0){
      List<Widget> listWidget = list.map((val){ //Map循环的形式：把Map类型的List包装成Widget类型，再放回List里，并赋值给流式布局
        return InkWell(
          onTap: (){},
          child: Container(
            width: ScreenUtil().setWidth(372),
            color: Colors.white,
            padding: EdgeInsets.all(5.0),
            margin: EdgeInsets.only(bottom: 3.0),
            child: Column(
              children: <Widget>[
                Image.network(val['image'],width:ScreenUtil().setWidth(370)),
                Text(
                  val['name'],
                  maxLines: 1,
                  overflow:TextOverflow.ellipsis,
                  style:TextStyle(color:Colors.blueGrey,fontSize:ScreenUtil().setSp(26)),
                ),
                Row(
                  children: <Widget>[
                    Text('￥${val['mallPrice']}'),
                    Text(
                      '￥${val['price']}',
                      style: TextStyle(color: Colors.black26,decoration: TextDecoration.lineThrough),
                    )
                  ],
                ),
              ],
            ),
          ),
        );
      }).toList(); //Map循环的形式：把Map类型的List包装成Widget类型，再放回List里，并赋值给流式布局

      return Wrap( //返回流式布局
        spacing: 2, //每行2列
        children: listWidget,
      );
    }else{
      return Text(''); //没有数据时返回空
    }
  }
  //火爆专区组合
  Widget _hotGoods(){
    return Container(
      child: Column(
        children: <Widget>[
          hotTitle,
          _wrapList(),
        ],
      ),
    );
  }

}

猜你喜欢

转载自www.cnblogs.com/joe235/p/11557772.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022