导航区域 温故GridView 和 column
Posted pp-pping
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航区域 温故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 和 column的主要内容，如果未能解决你的问题，请参考以下文章