导航区域 温故GridView 和 column

笑着哭i 提交于 2020-01-21 19:35:08

代码:

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('加载错误'),
);
}
},
),
);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!