Flutter中列表内Widget调用setState无法更新主组件状态问题

问题根因 #

你提前将所有列表项的ListTile预构建完成，存储在_iteamswigitcall列表中，这些Widget创建时绑定的是当时的_bonestoiteams对应位置的数值。后续调用setState修改_bonestoiteams的值时，已经生成好的ListTile不会自动重新构建，所以显示的永远是初始值，即使用ListView.builder返回预存的Widget也无法解决问题。

解决方案 #

删掉预存Widget的_iteamswigitcall列表，不要提前构建列表项，改为在build阶段动态生成列表项，每次setState后都会用最新的数值重新构建列表项，就能正常刷新显示。

步骤1：调整新增项的逻辑 #

原来的constractor方法不需要再构建ListTile存入列表，仅维护数据列表即可：

void addNewItem() async {
  // 这里按你的业务逻辑给_silectediteams添加对应的项
  // _silectediteams.add(新增的项名称);
  _bonestoiteams.add(0);
  // 调用setState触发刷新
  setState(() {});
}

步骤2：修改build中的列表渲染逻辑 #

把原来渲染_iteamswigitcall的部分替换为动态构建的代码：

ListView.builder(
  physics: NeverScrollableScrollPhysics(),  
  shrinkWrap: true, 
  primary: false, 
  itemCount: _silectediteams.length,
  itemBuilder: (context, index) {
    return ListTile(
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () {
              setState(() {
                _bonestoiteams[index] = _bonestoiteams[index] + 1;
              });
            },
            icon: Icon(Icons.add),
            color: Colors.green,
          ),
          Text(
            _bonestoiteams[index].toString(),
            textAlign: TextAlign.start,
            textDirection: TextDirection.rtl,
            style: TextStyle(
                fontSize: 14, color: Colors.black, fontWeight: FontWeight.bold),
          ),
          IconButton(
            onPressed: () => setState(() {
              // 修正原代码中减按钮也执行+1的逻辑错误
              if(_bonestoiteams[index] > 0) {
                _bonestoiteams[index] = _bonestoiteams[index] - 1;
              }
            }),
            icon: Icon(Icons.remove),
            color: Colors.red,
          ),
        ],
      ),
      leading: LocalData.iteams_img_1[LocalData.iteams_trade_name
                  .indexOf(_silectediteams[index])] ==
              ''
          ? Image(
              fit: BoxFit.cover,
              image: AssetImage('assets/img/medication.png'),
              height: 60,
              width: 60,
            )
          : Image(
              fit: BoxFit.cover,
              image: FileImage(File(LocalData.iteams_img_1[LocalData
                  .iteams_trade_name
                  .indexOf(_silectediteams[index])])),
              height: 60,
              width: 60,
            ),
      title: Text(
        _silectediteams[index].toString(),
        textAlign: TextAlign.start,
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }
)

注意事项 #

• Flutter的状态更新遵循数据驱动UI的原则，不要预构建静态Widget存储，要通过数据动态生成UI，状态变化时UI才会同步更新。
• 原代码中减号按钮的点击逻辑也是执行+1操作，属于业务逻辑错误，上述代码已经修正。

内容的提问来源于stack exchange，提问作者Adeeb Mark