好租客-06 资讯页实现上下拉刷新

1、UI效果：

2、代码实现

1、引入第三方库

dependencies:flutter:sdk: flutter# 安装第三方的路由管理页面fluro: "^1.5.1"flutter_swiper: ^1.1.4  pull_to_refresh: ^1.5.0    #用于上下拉刷新# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^1.0.2

2、new-item控件，news-data-item数据实现

1、news-data-item.dart 文件内容

class InfoItem {final String title;final String imageUrl;final String source;final String time;final String navigatorUrl;InfoItem({this.title, this.imageUrl, this.source, this.time, this.navigatorUrl});
}

2、news-item.dart 文件内容

import 'package:flutter/material.dart';
import 'package:flutter_hook_up_rent/model/news-data-item.dart';class NewsItem extends StatelessWidget {final InfoItem infoItem;NewsItem({this.infoItem});@overrideWidget build(BuildContext context) {var item = this.infoItem;var row = Row(crossAxisAlignment: CrossAxisAlignment.center, children: [Padding(padding: EdgeInsets.all(5)),Image(height: 100, image: NetworkImage(item.imageUrl)),Container(child: Expanded(child: Container(padding: EdgeInsets.all(10),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text(item.title,maxLines: 2,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 18)),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text(item.source,style: TextStyle(fontSize: 14, color: Colors.grey[400])),Text(item.time,style: TextStyle(fontSize: 14, color: Colors.grey[400]))],)],),),))]);return Container(margin: EdgeInsets.only(bottom: 10),width: double.infinity,height: 120,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Color(0xffffffff),),child: row);}
}

3、资讯页面 index-news.dart文件内容

/** @Description: * @Version: 1.0* @Autor: in hengqi by mengze * @Date: 2021-05-31 16:43:43* @LastEditors: in hengqi by mengze* @LastEditTime: 2021-06-02 17:22:46*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter_hook_up_rent/model/news-data-item.dart';
import 'package:flutter_hook_up_rent/pages/components/common/news-item.dart';class NewsPage extends StatefulWidget {final String title;NewsPage({this.title});@override_NewsPageState createState() => _NewsPageState();
}class _NewsPageState extends State {List dataSource = [InfoItem(title:'置业选择 | 安贞西里 三室一厅 河间的古雅别院置业选择 | 安贞西里 三室一厅 河间的古雅别院置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login'),InfoItem(title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',imageUrl:'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',source: '新华网',time: '两天前',navigatorUrl: 'login')];List dataList = [];RefreshController _refreshController =RefreshController(initialRefresh: true);//下拉刷新的事件响应void _onRefresh() async {dataList = [];await Future.delayed(Duration(milliseconds: 3000), () {setState(() {dataList = dataSource.toList();});});_refreshController.refreshCompleted();}//上拉刷新的事件响应void _onLoading() async {await Future.delayed(Duration(milliseconds: 3000));dataList.addAll(dataSource);setState(() {dataList = dataList;});_refreshController.loadComplete();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title), centerTitle: true),body: SafeArea(child: SmartRefresher(controller: _refreshController,enablePullDown: true,enablePullUp: true,onRefresh: _onRefresh,onLoading: _onLoading,child: ListView.builder(itemExtent: 100.0,itemCount: dataList.length,itemBuilder: (context, index) {var item = dataList[index];return NewsItem(infoItem: item);}),header: WaterDropHeader(),footer: CustomFooter(builder: (context, mode) {Widget body;if (mode == LoadStatus.idle) {body = Text("pull up laod");} else if (mode == LoadStatus.loading) {body = CupertinoActivityIndicator();} else if (mode == LoadStatus.failed) {body = Text("Loading Failed! Click retry!");} else {body = Text("NO more Data");}return Container(height: 55.0,child: Center(child: body,),);}),)),);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！