如何解决如何在分组列表中制作网格
我对 flutter 还很陌生,我正在尝试使用 GroupedListView 小部件 (package) 创建一个分组列表视图,但是,我希望组中的项目显示为网格。当我尝试进行网格视图时,卡片的大小按照我想要的方式进行,但每张都出现在另一行,而当我执行常规列表时,大小会发生巨大变化。如何让项目出现在同一行?
我当前的代码:
Widget _buildTeam(context) {
return GroupedListView<dynamic,String>(
physics: ScrollPhysics(),shrinkWrap: true,elements: routes == null ? [] : routes,groupBy: (element) => element['locationName'],groupSeparatorBuilder: (String value) => Column(
children: [
Padding(
padding: const EdgeInsets.only(right: 16.0,left: 16.0,bottom: 25),child: Container(
height: 55.0,color: Colors.grey[800],child: Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Text(value.toUpperCase(),style: TextStyle(
color: Colors.grey[200],fontSize: 20.0
),)
],),]
),itemBuilder: (context,element) => Padding(
padding: const EdgeInsets.only(left: 35.0,right: 35.0),child: GridView.count(
controller: _controller,physics: ScrollPhysics(),childAspectRatio: 0.75/ 1.4,padding: EdgeInsets.zero,scrollDirection: Axis.vertical,mainAxisSpacing: 1.0,crossAxisSpacing: 20.0,crossAxisCount: 2,children: List.generate(1,(index) {
return Padding(
padding: const EdgeInsets.only(bottom: 25.0),child: TeamCard1(element["driver"],element["helper"],element["lastUpdate"]),);
}),order: GroupedListOrder.ASC
);
}
它的样子: Screenshot1
我需要它的样子: Screenshot2
解决方法
您的 itemBuilder
一次仅使用一个元素来生成 GridView
。因此,您为“Buffalo”组获得的是两个 GridView,每个只有一个元素。
我认为最简单的方法是在创建 GroupedListView
之前转换您的路线,例如(在伪代码中):
List<GridView> routeGridsByLocation = groupBy(routes,location).map((routesForThisLocation) => GridView(...));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。