使用StatefulBuilder的setState无法修改Follow按钮颜色求助

你的代码问题在于：每次StatefulBuilder的builder函数执行时，都会重新初始化color变量为初始值，所以即使你在onTap里调用setState修改了color，builder重新执行时color又会被重置回原来的颜色，自然看不到切换效果。

下面是两种可行的解决方案，都能避免整个屏幕重建：

方案一：修复StatefulBuilder的用法 #

将状态变量（比如是否已关注的标记）放在StatefulWidget的State类中，在StatefulBuilder内部根据这个状态来计算颜色，这样状态不会被builder重新初始化：

// 在你的State类中定义状态变量
bool _isFollowing = false;

// 然后修改StatefulBuilder部分
StatefulBuilder(
  builder: (context, setState) {
    // 根据状态动态计算颜色
    Color color = _isFollowing 
        ? Color.fromRGBO(0, 149, 246, 1) 
        : Color.fromRGBO(38, 38, 38, 1);
    return Flexible(
      flex: 1,
      child: GestureDetector(
        onTap: () {
          // 这里的setState是StatefulBuilder提供的局部setState，只会触发builder重绘
          setState(() {
            _isFollowing = !_isFollowing;
          });
        },
        child: Container(
          alignment: Alignment.center,
          height: 30,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            color: color,
          ),
          // 顺便优化文本，切换状态时显示对应文字
          child: Text(_isFollowing ? 'Following' : 'Follow'),
        ),
      ),
    );
  },
)

方案二：使用ValueNotifier + ValueListenableBuilder（更轻量） #

如果不想把状态放在State类中，可以用ValueNotifier来管理局部状态，配合ValueListenableBuilder实现仅按钮部分的重绘，完全不需要调用任何setState：

// 定义ValueNotifier（可以放在State类中，或者局部作用域）
final ValueNotifier<bool> _isFollowingNotifier = ValueNotifier(false);

// 替换原来的StatefulBuilder为ValueListenableBuilder
Flexible(
  flex: 1,
  child: ValueListenableBuilder<bool>(
    valueListenable: _isFollowingNotifier,
    builder: (context, isFollowing, child) {
      Color color = isFollowing 
          ? Color.fromRGBO(0, 149, 246, 1) 
          : Color.fromRGBO(38, 38, 38, 1);
      return GestureDetector(
        onTap: () {
          // 直接更新ValueNotifier的值，自动触发重绘
          _isFollowingNotifier.value = !isFollowing;
        },
        child: Container(
          alignment: Alignment.center,
          height: 30,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            color: color,
          ),
          child: Text(isFollowing ? 'Following' : 'Follow'),
        ),
      );
    },
  ),
)

内容的提问来源于stack exchange，提问作者Moulik Gupta 50