如何限制ListView项的长度以防止错误

Question

我正在构建这个flutter应用程序，我想将其放在同一行上具有连续索引值的同一列表的项目中，但我在列表的范围内遇到了这个错误(这是我预期的(，但无法找到解决方案。child:Image.asset(menuItemList[index+1].Image(->因为这一行，特别是当menuItemList达到其极限时，它会在超出范围的索引中添加+1。。我想知道是否有其他方法可以做到这一点，或者我是否可以使用if语句来限制的范围

代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:projectfooddelivery/Src/models/menu_item.dart';
List<MenuItem> menuItemList = [
MenuItem(
name: "Steak",
image: "images/kfcfood.jpg",
price: 8.99,
icon: IconButton(
icon: Icon(Icons.add_circle), color: Colors.deepOrange,
)),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99, icon:IconButton(icon: IconButton(icon: Icon(Icons.add_circle,color: Colors.deepOrange,size: 35,), onPressed: null), onPressed: null),),
MenuItem(name: "Chips", image: "images/kfcfood.jpg", price: 30.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
MenuItem(name: "Steak", image: "images/kfcfood.jpg", price: 8.99),
];
class MenuWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 0),
height: 200,
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: menuItemList.length,
itemBuilder: (_, index) {
return Padding(
padding: const EdgeInsets.all(6.0),
child: Container(
child: Row(
children: <Widget>[
Container(
height: 150,
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(menuItemList[index].image)
),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Text("bRO")
],
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(left:18.0),
child: Container(
height: 150,
child:
Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(menuItemList[index+1].image)
),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Text("Something")
],
),
)
],
),
),
)
],
)),
);
},
)
);
}
}

Answer 1

在ListView的itemBuilder中使用if语句，并在生成器索引大于列表长度时返回null。

类似的东西

if(index >= menuItemList.length)
return null;

应该在CCD_ 5中。

Answer 2

您可以使用collection if功能有条件地添加第二项：

Row(
children: <Widget>[
Container(
...
),
if (index + 1 < menuItemList.length) // <-- collection if
Padding(
...
)
],
)

注：collection if可从Dart 2.3向前获得。点击此处查看更多信息。