Skip to content

使用 TouchArea 来控制当其覆盖的区域被触摸或使用鼠标交互时会发生什么。

不属于布局时,其宽度或高度默认为父元素的100%。

slint
export component Example inherits Window { width:200px; height:100px; area := TouchArea { width: parent.width; height: parent.height; clicked => { rect2.background = #ff0; } } Rectangle { x:0; width: parent.width /2; height: parent.height; background: area.pressed ? blue: red; } rect2 := Rectangle { x: parent.width /2; width: parent.width /2; height: parent.height; }}

##属性

enabled

布尔值 默认:true

禁用时,TouchArea不会识别任何触摸或鼠标事件,它们会被传递到下面的元素。

slint
import { Button, CheckBox } from "std-widgets.slint";
export component Example inherits Window { width:200px; height:100px;
 VerticalLayout { Rectangle { Button { text: "Try to press me"; } TouchArea { enabled: event-blocker.checked; } } event-blocker := CheckBox { text: "Block Access"; } }}

基本语法

注意

enabledTouchArea 被按下时设置为 false,将使用 PointerEventKind.Cancel 调用 pointer-event,并且 pressedhas-hover 属性将重置为 false

has-hover

布尔值 (out) 默认:false

当鼠标在 TouchArea区域上方时设置为 true。

mouse-cursor

枚举 MouseCursor 默认:第一个枚举值

鼠标悬停在 TouchArea 上时的鼠标光标类型。

MouseCursor

此枚举表示不同类型的鼠标光标。它是 CSS 中可用的鼠标光标的子集。 有关详细信息和图标,请参阅 MDN文档中的 cursor。 根据后端和使用的操作系统,单向调整大小的光标可能会被双向调整大小的光标替换。

  • default:系统的默认光标。
  • none:不显示光标。
  • help:表示帮助信息的光标。
  • pointer:表示链接的指着手。
  • progress:程序忙但仍可交互。
  • wait:程序忙。
  • crosshair:十字准线。
  • text:表示可选文本的光标。
  • alias:正在创建别名或快捷方式。
  • copy:正在创建副本。
  • move:要移动某些内容。
  • no-drop:此处不能放置某些内容。
  • not-allowed:不允许操作
  • grab:某些内容可抓取。
  • grabbing:某些内容正在被抓取。
  • col-resize:表示列可以水平调整大小。
  • row-resize:表示行可以垂直调整大小。
  • n-resize:单向向北调整大小。
  • e-resize:单向向东调整大小。
  • s-resize:单向向南调整大小。
  • w-resize:单向向西调整大小。
  • ne-resize:单向东北调整大小。
  • nw-resize:单向西北调整大小。
  • se-resize:单向东南调整大小。
  • sw-resize:单向西南调整大小。
  • **ew-resize*:双向东西调整大小。
  • ns-resize:双向南北调整大小。
  • nesw-resize:双向东北-西南调整大小。
  • nwse-resize:双向西北-东南调整大小。

mouse-x

长度 (out) 默认:0px

TouchArea 设置为鼠标在其内的位置。

mouse-y

长度 (out) 默认:0px

TouchArea 设置为鼠标在其内的位置。

pressed-x

长度 (out) 默认:0px

TouchArea 设置为鼠标最后一次按下时的位置。

pressed-y

长度 (out) 默认:0px

TouchArea 设置为鼠标最后一次按下时的位置。

pressed

布尔值 (out) 默认:false

当鼠标在其上按下时由 TouchArea 设置为 true

##回调

clicked()

单击时调用:在该元素上按下然后释放手指或鼠标左键。

double-clicked()

双击时调用。在该元素上短时间内按下并释放鼠标左键两次,或用手指完成相同的操作。clicked()回调将在 double-clicked()回调触发之前触发。

moved()

鼠标或手指已移动。仅当鼠标也被按下或手指继续触摸显示屏时才会调用。另请参阅 pointer-event(PointerEvent)

pointer-event(event: PointerEvent)

PointerEvent

表示由窗口系统发送的指针事件。 此结构传递给 TouchArea元素的 pointer-event回调。

  • button (PointerEventButton):被按下或释放的按钮
  • kind (PointerEventKind):事件的种类
  • modifiers (KeyboardModifiers):事件期间按下的键盘修饰键

scroll-event(event: PointerScrollEvent) -> EventResult

当鼠标滚轮旋转或发生其他滚动手势时调用。 PointerScrollEvent 参数包含有关在哪个方向上滚动多少的信息。

PointerScrollEvent

表示由窗口系统发送的指针滚动(或滚轮)事件。 此结构传递给 TouchArea元素的 scroll-event回调。

  • delta_x (长度):水平方向的像素数
  • delta_y (长度):垂直方向的像素数
  • modifiers (KeyboardModifiers):事件期间按下的键盘修饰键

返回的 EventResult指示是接受还是忽略事件。被忽略的事件会转发给父元素。

EventResult

此枚举描述事件是被事件处理程序拒绝还是接受。

  • reject:事件被此事件处理程序拒绝,然后可能由父项处理
  • accept:事件被接受,不会被进一步处理

基于 MIT 协议发布