在API中返回20条这样的记录,
[{...“p”:1.0 ...},{...“p”:1.1 ...},{...“p”:2.0 ...},{“p”:2.1} ,{“p”:3.0},{“p”:3.1},]
1.0到1.1表示第一行,2.0到2.1表示第二行
我创建了Listview,我使用其他逻辑,但我不知道如何在图像下分组?
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Data> values = snapshot.data;
return ListView.builder(
padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
itemCount: getItemCounter(values),
itemBuilder: (BuildContext context, int index) {
return GridView.count(
physics: ScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 4,
children: List.generate(2, (index) {
return GridTile(
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
assets2(values[index].i, widget._url))),
child: Column(
children: [
Card(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blueAccent, width: 1.5)),
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/icon1.svg',
height: 50.0,
),
],
),
),
),
Expanded(
child: Text(values[index].d, textAlign: TextAlign.center, style: TextStyle(fontSize: 10.0),),
),
],
),
),
);
}),
);
},
);
// itemCount: 10,
}
getItemCounter(List<Data> values){
List iPoint = [];
List distictI = [];
for(int i = 0; i < values.length; i++){
iPoint.add(values[i].p.toInt());
}
//remove duplicate
distictI = iPoint.toSet().toList();
return distictI.length;
}
我在我的项目中做了类似的事情。
使用CustomScrollView
和里面的SliverList
,以及GridView
里面的primary: false
以下是特定于您的示例的代码:
class M extends StatelessWidget {
@override
Widget build(BuildContext context) {
final data = [
{"p": 1.0},
{"p": 1.1},
{"p": 2.0},
{"p": 2.1},
{"p": 3.0},
{"p": 3.1},
];
final listCount =
data.map<double>((m) => m["p"]).reduce((a, b) => max(a, b)).floor();
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
final items = data
.where((m) => i + 1 <= m["p"] && m["p"] < i + 2)
.toList(growable: false)
..sort((a, b) => a["p"].compareTo(b["p"]));
return GridView.builder(
itemCount: items.length,
shrinkWrap: true,
primary: false,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 70.0,
childAspectRatio: 0.9,
),
itemBuilder: (context, i) {
final item = items[i];
//TODO implement this method to build individual item
return _buildItem(item);
},
);
},
childCount: listCount,
),
),
],
);
}
}
编辑:添加问题特定代码示例。代码美化。