Question

im试图通过点击FloatingActionButton来创建一个新的Hero Widget。因此，我创建了一个HeroCover小部件，其中包含单个Hero小部件。

class HeroCover extends StatelessWidget {
  final Widget callPage;
  final heroTag;
  final coverImageName;
  final name;

  HeroCover({this.callPage, this.heroTag, this.coverImageName, this.name});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Hero(
        tag: heroTag,
        child: GestureDetector(
            onTap: () => Navigator.push(
                context, MaterialPageRoute(builder: (context) => callPage)),
            child: Column(children: <Widget>[
              Image(
                image: new AssetImage(coverImageName),
                height: 100,
                width: 100,
              ),
              Text(name),
            ])),
      ),
    );
  }
}

现在在我的HeroPage上，根据以下带有映射的列表创建那些HeroCover小部件

static List<int> matrixID = [0, 1, 2];
  static var heroTag = ['matrix1', 'matrix2', 'matrix3'];
  static var name = ['Matrix Kitchen', 'DAAANCEFLOR', 'Bath'];
  static var matrixIMG = [
    'imgs/matrix1.png',
    'imgs/matrix2.png',
    'imgs/matrix3.png'
  ];
  var matrixCall = [
    ...matrixID.map((id) {

      return MatrixPageOne(
        name: name[id],
        matrixSize: 20,
        heroTag: heroTag[id],
        heroImage: matrixIMG[id],
      );
    }).toList(),
  ];

在这里，我根据MatrixID的长度在BuildMethod中映射matrixID以返回HeroCover小部件：

body: Column(
          children: [
            Wrap(children: [
              ...matrixID.map((id) {

                return HeroCover(
                  heroTag: heroTag[id],
                  callPage: matrixCall[id],
                  name: name[id],
                  coverImageName: matrixIMG[id],
                );
              }).toList()
            ] // wrap children
                ),
          ],
        ),

现在，如果我按下FloatingActionButton，我将为每个列表添加一个元素：

floatingActionButton: FloatingActionButton(
          onPressed: () {
            //startAddMatrix(context);
            setState(() {

              matrixID.add(matrixID.length);
              name.add('new Matrix');
              matrixIMG.add('imgs/matrix1.png');
              heroTag.add(DateTime.now().toString()); 

            });
          },
          child: Icon(Icons.add),
          backgroundColor: color_3,
        ),

因此.map应该在每个列表中再找到一个元素，然后应该显示下一个HeroCover Widget（如果我将其手动添加到每个列表中就没有问题），但是如果我按下FloatingActionButton，就会发生这种情况：{{ 3}}

但是，如果我现在在BottomNavigationBar中点击“主页”，然后回到“设备”，则一切应为：

我只是不明白为什么.add会引起RangeError。如果有人知道这里出了什么问题，请非常感谢您的帮助！

Answer 1

您的带有... matrixID.map（（id）{，
所以它有3个值0..2
在您的floatActionButton中，没有扩展matrixCall，matrixCall仍然只有3个值0..2

使用时

Wrap(children: [
              ...matrixID.map((id) {

                return HeroCover(
                  heroTag: heroTag[id],
                  callPage: matrixCall[id],
                  name: name[id],
                  coverImageName: matrixIMG[id],
                );
              }).toList()

matrixID具有4个值0..3，
和matrixCall仍然有3个值，matrixCall [3]没有值。

如果我在列表中添加内容，为什么会出现RangeError？

1 个答案: