导航区域 温故GridView 和 column
作者:互联网
代码:
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class TopNavigator extends StatelessWidget { final List navigatorList;TopNavigator({this.navigatorList});
Widget _gridViewItemUI(BuildContext context,item){ return InkWell( onTap: (){ print('点击了导航'); }, child: Column( children: <Widget>[ Image.network(item['image'],width:ScreenUtil().setWidth(95)), Text(item['mallCategoryName']) ], ), ); }
@override Widget build(BuildContext context) { if (this.navigatorList.length > 10) { this.navigatorList.removeRange(10, this.navigatorList.length); } return Container( height: ScreenUtil().setHeight(320), padding: EdgeInsets.all(10.0), child: GridView.count( crossAxisCount: 5,//每行5个 padding: EdgeInsets.all(5.0),//间距 children: navigatorList.map((item){ return _gridViewItemUI(context, item); }).toList(),//切记返回一个集合 tolist() ), ); } } 加载导航区域代码: 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(); return Column( children: <Widget>[ SwiperDiy(swiperDataList: swiper), TopNavigator(navigatorList: navlist), ], ); }else{ return Center( child: Text('加载错误'), ); } }, ), );
标签:GridView,return,column,温故,navigatorList,List,item,context,data 来源: https://www.cnblogs.com/pp-pping/p/12222787.html