在使用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;
      }
  }

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐