Flutter按钮点击后保持背景色与图标颜色切换状态的实现问题

核心思路 #

要实现点击后保持状态的按钮，关键是通过状态变量跟踪按钮的激活状态，再根据状态动态切换背景色和图标颜色，而非依赖按钮本身的临时按压状态。

修改后的完整代码 #

假设你的页面是StatefulWidget，修改后的代码如下：

class DeviceManagementPage extends StatefulWidget {
  const DeviceManagementPage({super.key});

  @override
  State<DeviceManagementPage> createState() => _DeviceManagementPageState();
}

class _DeviceManagementPageState extends State<DeviceManagementPage> {
  // 为每个按钮声明状态变量，跟踪是否激活
  bool _isDoubleTearActive = false;
  bool _isLightbulbActive = false;
  bool _isMegaphoneActive = false;
  bool _isWaterActive = false;

  @override
  Widget build(BuildContext context) {
    return _deviceManagement();
  }

  Widget _deviceManagement() {
    return Padding(
      padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
      child: Container(
        height: 86,
        decoration: ShapeDecoration(
          color: secondary,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        child: Row(
          children: <Widget>[
            _doubleTear(),
            const Spacer(),
            _lightbulb(),
            const Spacer(),
            _megaphone(),
            const Spacer(),
            _water(),
            const Spacer(),
            _expandButton(),
          ],
        ),
      ),
    );
  }

  Widget _doubleTear() {
    return Padding(
      padding: const EdgeInsets.only(left: 12),
      child: MaterialButton(
        onPressed: () {
          // 点击时切换状态并更新UI
          setState(() {
            _isDoubleTearActive = !_isDoubleTearActive;
          });
        },
        elevation: 0,
        // 根据状态切换背景色
        color: _isDoubleTearActive ? Main : tertiary,
        splashColor: Main,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: SvgPicture.asset(
          'assets/images/li-double-tear.svg',
          // 根据状态切换图标颜色
          color: _isDoubleTearActive ? Colors.white : textSecondary,
        ),
      ),
    );
  }

  // 其他按钮按同样逻辑修改
  Widget _lightbulb() {
    return MaterialButton(
      onPressed: () {
        setState(() {
          _isLightbulbActive = !_isLightbulbActive;
        });
      },
      elevation: 0,
      color: _isLightbulbActive ? Main : tertiary,
      splashColor: Main,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: SvgPicture.asset(
        'assets/images/li-lightbulb.svg', // 替换成你的图标路径
        color: _isLightbulbActive ? Colors.white : textSecondary,
      ),
    );
  }

  // 省略_megaphone、_water、_expandButton的实现，按相同逻辑修改即可
  Widget _megaphone() { /* ... */ }
  Widget _water() { /* ... */ }
  Widget _expandButton() { /* ... */ }
}

关键改动点 #

• 添加状态变量：为每个按钮声明bool类型变量，记录当前是否处于激活状态
• 切换状态逻辑：在onPressed回调中通过setState切换状态，触发UI重绘
• 动态样式绑定：按钮的color和图标的color都根据状态变量动态赋值，实现激活/非激活样式切换
• 移除冗余容器：去掉了按钮外层的Container（原代码中它的背景色和MaterialButton重复，导致样式冲突）

为什么之前的方案不行 #

ElevatedButton、TextButton等默认Material按钮的变色效果，是基于临时交互状态（如pressed、hovered）设计的，交互结束后会自动恢复原状。要实现持久的状态切换，必须自己通过状态变量管理样式，而非依赖按钮的内置状态。

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