为什么当我调用 setState 时应用程序没有重建？

Question

我正在使用 Flutter 开发一个应用程序，但遇到一个问题：当我调用 setState() 方法时，我要更新的列表根本没有更新。我的意思是，它不会重绘小部件。

首先，我有我的自定义小部件列表，它是用一个元素初始化的：

List<AdvFctPompa> _advFctPompaList = [AdvFctPompa(name: 'Bloc initial', temp: '4748425', imgPath: img2)];

我的自定义小部件如下所示：

import 'package:flutter/material.dart';

class AdvFctPompa extends StatefulWidget {
  final String imgPath;
  final String name;
  final String temp;
  BoxConstraints constraint;
  AdvFctPompa({
    Key key,
    this.imgPath,
    @required this.name,
    @required this.temp,
    this.constraint,
  }) : super(key: key);

  @override
  _AdvFctPompaState createState() => _AdvFctPompaState();
}

class _AdvFctPompaState extends State<AdvFctPompa> {
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: <Widget>[
          Container(
            height: widget.constraint.maxHeight * .6,
            width: widget.constraint.maxWidth * .7,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
              image: DecorationImage(
                image: NetworkImage(widget.imgPath),
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(height: 5),
          Expanded(
            child: Container(
              height: widget.constraint.maxHeight,
              width: widget.constraint.maxWidth * .7,
              padding: const EdgeInsets.only(left: 5, right: 5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 5),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          widget.name,
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Text(
                          widget.temp + "ºC",
                          style: TextStyle(
                            fontWeight: FontWeight.w400,
                            fontSize: 15,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 5),
                  Container(
                    height: 30,
                    width: 100,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: ExactAssetImage('assets/images/img6.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

其次，我有一个在列表中添加新元素的按钮：

GestureDetector(
                      child: Visibility(
                        visible: _heightAnimation.value > 90,
                        child: Icon(
                          Icons.add_to_queue,
                          color: Colors.white,
                          size: _iconSizeAnimation.value,
                        ),
                      ),
                      onTap: _addAdvFct,
                    )

这是我的方法：

void _addAdvFct() {
    print(_advFctPompaList.length);
    _advFctPompaList.add(
      AdvFctPompa(
        name: 'Bloc initial',
        temp: '4748425',
        imgPath: img2,
        constraint: constraints,
      ),
    );
    setState(() {});
  }

我也试过了：

 void _addAdvFct() {
    print(_advFctPompaList.length);
    setState(() {
      _advFctPompaList.add(
        AdvFctPompa(
          name: 'Bloc initial',
          temp: '4748425',
          imgPath: img2,
          constraint: constraints,
        ),
      );
    });
  }

我想绘制我的列表的方式是通过LayoutBuider：

Expanded(
                    child: LayoutBuilder(builder: (_, constraint) {
                      _initConstrains(constraint);
                      return ListView(
                        padding: const EdgeInsets.only(right: 20),
                        scrollDirection: Axis.horizontal,
                        children: _advFctPompaList,
                      );
                    }),
                  ),

问题是，当我按下按钮时，它会在控制台中显示列表元素的数量正在增加，但屏幕上没有任何变化。

我错过了什么吗？

Answer 1

试试

void _addAdvFct() {
print(_advFctPompaList.length);
_advFctPompaList.add(
  AdvFctPompa(
    name: 'Bloc initial',
    temp: '4748425',
    imgPath: img2,
    constraint: constraints,
  ),
);
setState(() {
  _advFctPompaList;
});

}