为什么当我调用 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;
});

}