效果
实现代码如下
home_page.dart
import 'dart:convert'; import 'dart:ffi'; import 'package:flutter/material.dart'; import 'package:flutterwncq/constants/constants.dart' show AppUrls; import 'package:flutterwncq/models/index_data_bean.dart'; import 'package:flutterwncq/utils/net_utils.dart'; import 'package:flutterwncq/widgets/error.dart'; import 'package:flutterwncq/widgets/home_list_item.dart'; import 'package:flutterwncq/widgets/loading.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { IndexdataBean _data; bool _showLoading = false; bool _isFirst = true; @override Widget build(BuildContext context) { return RefreshIndicator( onRefresh: _pullToRefresh, child: _buildListView(), ); } Future<Void> _pullToRefresh() async { _indexData(); } _buildListView() { if (_data == null|| _showLoading) { if(_isFirst || _showLoading) { _isFirst = false; _showLoading = false; _indexData(); } return Loading();//加载中视图 } if(_data.errcode!='200'){ return Error( onRetry: (){ setState(() { _showLoading = true; }); }, );//加载出错显示的视图 } //成功加载数据 显示界面 return ListView.separated( padding: const EdgeInsets.all(0.0), itemBuilder: (context,index){ return HomeListItem( indexDatas: _data.data.indexDatas[index], ); }, separatorBuilder: (context,index)=>Container(height: 2,), itemCount: _data.data.indexDatas.length, ); } //网络加载数据 void _indexData() { var params = new Map<String, dynamic>(); params['pageVersion'] = '2'; NetUtils.get(AppUrls.INDEXDATA, params).then((result) { print(result); var indexData = json.decode(result); setState(() { _data = IndexdataBean.fromJson(indexData); }); }); } }home_list_item.dart
import 'package:flutter/material.dart'; import 'package:flutterwncq/models/index_data_bean.dart'; import 'package:flutterwncq/page/chewie_page.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:marquee_flutter/marquee_flutter.dart'; import 'banner_widget.dart'; class HomeListItem extends StatelessWidget { final IndexDatas indexDatas; HomeListItem({this.indexDatas}); List<BannerItem> bannerList = []; @override Widget build(BuildContext context) { //根据不同的type加载不同的item switch (indexDatas.type) { case 2: return CachedNetworkImage( height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, imageUrl: indexDatas.picUrl, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ); /*return FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: indexDatas.picUrl, height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, fit: BoxFit.cover, );*/ /*return Image.network( indexDatas.picUrl, height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, fit: BoxFit.cover, );*/ /*return Container( color: Colors.green, height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, );*/ case 4: return Container( color: Color(0xff0b0b0b), height: 50.0, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SizedBox( width: 10.0, ), Image.asset( 'assets/images/icon_notice.webp', width: 20.0, height: 20.0, ), SizedBox( width: 5.0, ), Expanded( //权重 child: MarqueeWidget( text: indexDatas.title, textStyle: TextStyle( color: Color(0xffe2b866), fontSize: 10.0, fontWeight: FontWeight.normal, decoration: TextDecoration.none, ), scrollAxis: Axis.horizontal, ), /*Text( indexDatas.title, maxLines: 1, style: TextStyle(color: Color(0xffe2b866),fontSize: 12.0,fontWeight: FontWeight.normal,decoration: TextDecoration.none,), overflow: TextOverflow.ellipsis, ),*/ flex: 1, //设置比例参数 ), SizedBox( width: 5.0, ), Image.asset( 'assets/images/icon_nextdolden.png', width: 15.0, height: 15.0, ), SizedBox( width: 8.0, ), ], ), ); case 5: return GestureDetector( onTap: () { //Navigator.of(context).push(MaterialPageRoute(builder: (context)=>VideoPlayerPage(indexDatas.objUrl))); Navigator.of(context).push(MaterialPageRoute( builder: (context) => ChewiePage( indexDatas.objUrl, picUrl: indexDatas.picUrl, ))); }, child: Stack( children: <Widget>[ CachedNetworkImage( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, imageUrl: indexDatas.picUrl, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ), Image.asset( 'assets/images/player.png', width: 45, height: 45.0, ) ], alignment: AlignmentDirectional.center, ), ); case 6: if (bannerList.length <= 0) { for (var o in indexDatas.contentDatas) { bannerList.add(BannerItem(itemImagePath: o.picUrl)); } } return BannerWidget( MediaQuery.of(context).size.width * indexDatas.aspectRatio, bannerList, build: (index, bannerItem) { return Scaffold( body: CachedNetworkImage( height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, imageUrl: bannerItem.itemImagePath, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ), /*FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: bannerItem.itemImagePath, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.width * indexDatas.aspectRatio, fit: BoxFit.cover, ),*/ /*Image.network( bannerItem.itemImagePath, width: MediaQuery.of(context).size.width, height:MediaQuery.of(context).size.width * indexDatas.aspectRatio, fit: BoxFit.cover, ),*/ ); // return Image.network( // bannerItem.itemImagePath, // width: MediaQuery.of(context).size.width, // height:MediaQuery.of(context).size.width * indexDatas.aspectRatio, // ); }, bannerPress: (pos, item) { print('第$pos点击了'); }, ); case 8: return Container( color: Color(0xff000000), height: MediaQuery.of(context).size.width * 0.267, child: Row( children: <Widget>[ Expanded( child: CachedNetworkImage( imageUrl: indexDatas.contentDatas[0].picUrl, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ), flex: 1, ), Expanded( child: CachedNetworkImage( imageUrl: indexDatas.contentDatas[1].picUrl, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ), flex: 1, ), Expanded( child: CachedNetworkImage( imageUrl: indexDatas.contentDatas[2].picUrl, placeholder: (context, url) => Center( child: CircularProgressIndicator(), ), errorWidget: (context, url, error) => Icon(Icons.error), fit: BoxFit.cover, ), flex: 1, ), ], ), ); } } }
