Question

我正在构建一个Flutter应用程序，我想在其中将具有相同索引值的同一列表中的项目放在同一行上，但是我在列表范围内遇到了此错误（我曾预期），但无法找出解决方案。子级：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

在if的{{1}}中使用itemBuilder语句，并在构建器索引大于列表长度时返回ListView。

类似

null

应该在if(index >= menuItemList.length) return null;中。

Answer 2

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

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

注意：collection if可从Dart 2.3转发。进一步了解here。

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

2 个答案: