Flutter实现容器鼠标悬停时背景颜色切换

你的代码缺少状态管理和MouseRegion的悬停回调处理，要实现悬停变色，需要通过StatefulWidget维护悬停状态，结合MouseRegion的onEnter和onExit方法触发状态更新。

完整实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<HoverableContainer> createState() => _HoverableContainerState();
}

class _HoverableContainerState extends State<HoverableContainer> {
  // 维护悬停状态，默认未悬停
  bool _isHovering = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      // 鼠标进入时标记为悬停状态
      onEnter: (_) => setState(() => _isHovering = true),
      // 鼠标退出时取消悬停状态
      onExit: (_) => setState(() => _isHovering = false),
      child: GestureDetector(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.all(10),
          child: const Text(
            'Container',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            // 根据悬停状态切换背景色
            color: _isHovering ? Colors.grey[800] : Colors.black,
            boxShadow: const [
              BoxShadow(
                color: Colors.black38,
                blurRadius: 10,
                spreadRadius: 1,
                offset: Offset(1, 3),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 使用StatefulWidget：需要动态更新UI状态（悬停时的颜色变化），无状态组件无法完成状态维护。
• 新增_isHovering变量：记录当前是否处于悬停状态，初始值为false。
• 利用MouseRegion的回调：onEnter在鼠标进入组件区域时触发，onExit在鼠标离开时触发，通过setState更新状态，触发UI重建。
• 动态设置背景色：在BoxDecoration的color属性中，根据_isHovering的值切换颜色，默认黑色，悬停时用深灰色，你可以替换为任意自定义颜色。

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