Flutter调用setState后GridView.builder未重建如何修复？

核心问题原因 #

你的代码存在三个不符合Flutter状态更新机制的问题，直接导致界面不刷新：

• 修改卡片选中状态的逻辑没有包裹在setState回调中。你之前测试修改背景色能生效，是因为那段修改逻辑放在了setState里，但卡片选中状态的修改全程没有通知Flutter框架需要重建界面。
• 状态归属错误。你将isSelected这个交互状态存在了DisplayCard（StatelessWidget）内部，还通过自定义的selectOrUnselect方法直接修改组件属性。StatelessWidget是不可变组件，内部属性必须声明为final，直接修改内部属性的操作不会被框架感知，就算父组件触发重建，也可能因为Widget引用未变化而复用旧的渲染结果。
• 额外隐患：你在initState中提前初始化了baseDisplayList存储一组Widget对象，这种写法很容易出现状态不同步问题——提前创建的Widget持有的是创建时的旧状态，除非你手动替换列表内的Widget实例，否则框架会认为组件配置没有变化，不会更新渲染。

修复方案 #

按照Flutter声明式开发的规范调整代码：

1. 将交互状态上移到父组件（_ChooseScreenState）统一管理，子组件只做纯展示，不持有可变状态
2. 所有修改状态的操作必须包裹在setState回调内，通知框架触发重建
3. 不要提前缓存子Widget列表，在GridView.builder的itemBuilder中根据当前状态动态生成子组件

修复后的完整代码 #

主页面逻辑

import 'package:flutter/material.dart';
import 'image_display_card.dart';

void main() {
  runApp(MaterialApp(
    home: ChooseScreen(),
  ));
}

class ChooseScreen extends StatefulWidget {
  @override
  State<ChooseScreen> createState() => _ChooseScreenState();
}

class _ChooseScreenState extends State<ChooseScreen> {
  // 记录当前选中的卡片索引，-1表示无选中项
  int currentSelectedIndex = -1;

  // 图片资源列表
  List<Image> listOfInitialImages = const [
    Image(image: AssetImage('images/testing_stock/stickFigureMale.png')),
    Image(image: AssetImage('images/testing_stock/stickFigureFemale.png')),
    Image(image: AssetImage('images/testing_stock/gown.png')),
    Image(image: AssetImage('images/testing_stock/hat1.png')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Choose picture'),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemCount: listOfInitialImages.length,
        itemBuilder: (BuildContext context, int index) {
          // 每次重建时根据当前选中索引传入卡片状态
          return DisplayCard(
            picture: listOfInitialImages[index],
            isSelected: currentSelectedIndex == index,
            onCardSelected: () {
              // 状态修改必须包裹在setState中
              setState(() {
                currentSelectedIndex = index;
              });
            },
          );
        },
      ),
    );
  }
}

DisplayCard组件代码

import 'package:flutter/material.dart';

class DisplayCard extends StatelessWidget {
  final Image picture;
  final VoidCallback? onCardSelected;
  // StatelessWidget所有属性必须为final
  final bool isSelected;

  const DisplayCard({
    super.key,
    this.isSelected = false,
    this.onCardSelected,
    this.picture = const Image(
        image: AssetImage('images/testing_stock/stickFigureMale.png')),
  });

  // 删除原有的selectOrUnselect方法，子组件不管理自身可变状态

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onCardSelected,
      child: Container(
        height: 200,
        margin: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          color: Colors.grey[300],
          image: DecorationImage(
            image: picture.image,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(isSelected ? 0.4 : 0.0),
                BlendMode.srcOver
            ),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

调整后点击卡片时，setState会触发父组件重建，GridView的每个子项会根据最新的选中索引重新生成，选中蒙层效果会实时同步，不需要手动刷新应用。

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