Flutter点击ListTile时所有列表项闪烁问题求助

点击ListTile时所有列表项闪烁，是因为每次调用setState()会触发整个组件重建，而每个列表项里的FutureBuilder会重新执行findUserById()请求，导致所有列表项重新加载并刷新UI，出现闪烁现象。

方法一：提前缓存用户数据（推荐原生方案） #

在组件内缓存已获取的用户数据，避免每次重建都重复请求。修改代码如下：

1. 在State类中添加缓存容器：

Map<String, CloudUser> _cachedUsers = {}; // 缓存用户数据，key为user_id

2. 添加批量缓存用户的方法：

Future<void> _cacheUsers(List<CloudCompanyUser> companyUsers) async {
  for (var cu in companyUsers) {
    if (!_cachedUsers.containsKey(cu.user_id)) {
      CloudUser? user = await _userReposatory.findUserById(cu.user_id);
      if (user != null) {
        _cachedUsers[cu.user_id] = user;
      }
    }
  }
}

3. 修改StreamBuilder逻辑，先缓存再构建列表：

StreamBuilder<List<CloudCompanyUser>>(
  stream: _companyInviteReposatory.getCompanyUsersStream(_companyId),
  builder: (BuildContext context, AsyncSnapshot<List<CloudCompanyUser>> snapshot) {
    if (snapshot.hasError) {
      print(snapshot.error);
      return const Text('Something went wrong');
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 先缓存所有用户数据，再渲染列表
    return FutureBuilder<void>(
      future: _cacheUsers(snapshot.data!),
      builder: (context, cacheSnapshot) {
        if (cacheSnapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (BuildContext context, int index) {
            final companyUser = snapshot.data![index];
            CloudUser? user = _cachedUsers[companyUser.user_id];
            if (user == null) {
              return const ListTile(title: Text('Loading...'));
            }
            return _buildUserCompanyTile(user, index);
          },
        );
      },
    );
  },
)

4. 重构列表项构建方法，移除FutureBuilder：

Widget _buildUserCompanyTile(CloudUser user, int index) {
  bool isSelected = _selectedUsersIndexes.contains(index);

  return ListTile(
    title: Text(user.name),
    subtitle: Text(user.email),
    trailing: isSelected ? const Icon(Icons.check) : null,
    onTap: () {
      setState(() {
        if (isSelected) {
          _selectedUsersIndexes.remove(index);
        } else {
          _selectedUsersIndexes.add(index);
        }
      });
    },
    tileColor: isSelected ? Colors.green : null,
  );
}

方法二：使用独立StatefulWidget封装列表项 #

将每个列表项封装为独立的StatefulWidget，这样setState()只会刷新当前点击的列表项，不会触发全局重建：

class UserSelectTile extends StatefulWidget {
  final CloudUser user;
  final bool isSelected;
  final VoidCallback onToggle;

  const UserSelectTile({
    super.key,
    required this.user,
    required this.isSelected,
    required this.onToggle,
  });

  @override
  State<UserSelectTile> createState() => _UserSelectTileState();
}

class _UserSelectTileState extends State<UserSelectTile> {
  late bool _isSelected;

  @override
  void initState() {
    _isSelected = widget.isSelected;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant UserSelectTile oldWidget) {
    if (oldWidget.isSelected != widget.isSelected) {
      _isSelected = widget.isSelected;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.user.name),
      subtitle: Text(widget.user.email),
      trailing: _isSelected ? const Icon(Icons.check) : null,
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
        });
        widget.onToggle();
      },
      tileColor: _isSelected ? Colors.green : null,
    );
  }
}

在原组件中使用该组件：

// 假设已缓存用户数据，在ListView.builder的itemBuilder中：
return UserSelectTile(
  user: user,
  isSelected: _selectedUsersIndexes.contains(index),
  onToggle: () {
    setState(() {
      if (_selectedUsersIndexes.contains(index)) {
        _selectedUsersIndexes.remove(index);
      } else {
        _selectedUsersIndexes.add(index);
      }
    });
  },
);

方法三：使用状态管理库（第三方包） #

如果项目已经使用状态管理库，可以通过局部状态更新避免全局重建，比如：

• Provider/ChangeNotifier：将选中状态抽离为全局或局部状态，仅通知关联组件更新
• Riverpod：使用StateProvider管理选中列表，通过Consumer仅刷新需要更新的列表项

这些库的核心逻辑都是通过局部状态订阅，避免触发整个组件树的重建。

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