Flutter Web 鼠标样式修改

最新推荐文章于 2023-03-20 14:42:44 发布

bawomingtian123

最新推荐文章于 2023-03-20 14:42:44 发布

阅读量2.2k

点赞数

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/bawomingtian123/article/details/122197782

版权

在使用Flutter开发Web中为了更好的交互体检，往往会根据需求动态修改鼠标样式。

MouseRegion(
              cursor: judgeMouseCursor(),
              onEnter: (PointerEnterEvent event) {
                mouseDragDirection = -1;
              },
              onExit: (PointerExitEvent event) {
                mouseDragDirection = -1;
              },
              onHover: (PointerHoverEvent event) {
                setState(() {
                  mouseDragDirection = validNose(event.localPosition, 
                  element.size!);
                });
              },
              child: Container(
                decoration: judgeDecoration(element, editWidgetItem),
                padding: const EdgeInsets.all(2),
                child: buildDetails.buildDetailsWidgetDesc(element),
              ),
            )

通过设置MouseCursor动态修改鼠标样式

  ///设置鼠标样式
  MouseCursor judgeMouseCursor() {
     if (mouseDragDirection == LEFT_TOP_APEX) {
        return SystemMouseCursors.resizeUpLeft;
      } else if (mouseDragDirection == RIGHT_TOP_APEX) {
        return SystemMouseCursors.resizeUpRight;
      } else if (mouseDragDirection == RIGHT_BOTTOM_APEX) {
        return SystemMouseCursors.resizeDownRight;
      } else {
        return SystemMouseCursors.resizeDownLeft;
      }
  }