当孩子是芯片小部件时，Flutter MouseRegion 不起作用

Posted 2023-02-19

【中文标题】当孩子是芯片小部件时，Flutter MouseRegion 不起作用

【英文标题】：Flutter MouseRegion is not working when the child is a Chip Widget

【发布时间】：2022-01-24 03:35:53

【问题描述】：

当孩子是 Chip 小部件时，我的 Flutter Web 程序中的鼠标光标不会变为悬停时的单击光标。我将 Chip 更改为 Text 和 Container 小部件，鼠标光标更改没有任何问题。

下面是 MouseRegion 的代码。

return MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Container(
    width: 200,
    alignment: Alignment.centerRight,
    child: GestureDetector(
      onTap: () ,
      child: Chip(
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      ),
    ),
  ),
),

【参考方案1】：

将您的 GestureDetector 更改为 InkWell，这对我有用。

return  Container(
    width: 200,
    alignment: Alignment.centerRight,
    child: InkWell( //use InkWell insted of GestureDetector 
      onTap: () ,
      child: Chip(
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      ),
    ),
),

【讨论】：

我试过了，还是不行。鼠标光标在悬停时保持为默认光标。

【参考方案2】：

您希望使用ActionChip 代替Chip 上的MouseRegion 和GestureDetector。

    ActionChip(
        onPressed() /* use onPressed even if it would be empty */
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      )

【讨论】：

完美运行！ :) 谢谢你