用户交互方法

您可以为 UI 添加交互方法,创建预设基本组件的实例,例如通过使用指针设备或键盘执行操作,或横向或纵向翻动屏幕的可视区域。它们位于“组件”>“默认组件”>“基本”中。

此外,您还可以创建预设的UI 控件实例,以通知用户应用程序的进度或从用户处获取输入。

以下基本组件可用于用户交互:

您可以在 属性 视图中指定组件实例的属性值。

鼠标区域

使用信号和处理器来传递鼠标交互。具体来说,您可以使用一个 鼠标区域 组件定义 JavaScript 回调(也称为信号处理器),它接受定义区域内的事件。

鼠标区域接收定义区域内的事件。一种快速定义此区域的方法是将鼠标区域锚定到其父区域。如果父元素是一个 矩形(或任何从Item继承的组件),则鼠标区域将填充父元素定义的区域。或者,您也可以定义一个比父元素更小或更大的区域。许多控件,例如按钮,包含鼠标区域。

鼠标区域会根据不同的鼠标事件发出信号

  • canceled()
  • clicked()
  • doubleClicked()
  • entered()
  • exited()
  • positionChanged()
  • pressAndHold()
  • pressed()
  • released()

鼠标区域属性

鼠标区域是一个不可见的组件,通常与可见组件结合使用,以提供对该组件的鼠标处理。通过有效地充当代理,鼠标处理逻辑可以包含在鼠标区域组件中。

选择启用复选框以启用代理组件的鼠标处理。当禁用时,鼠标区域对鼠标事件不可见。

"Mouse Area properties"

默认情况下,鼠标区域组件仅报告鼠标点击,而不是鼠标光标位置的变化。选择悬停复选框以确保在鼠标按钮未按下时,适当的处理程序被使用,并必要时更新其他属性的值。

尽管鼠标区域是一个不可见的组件,但它有一个可见属性。在可见性部分取消选择可见复选框,可以使鼠标区域对鼠标事件不可见。

接受按钮字段中,选择鼠标区域响应的鼠标按钮。选择所有按钮以使鼠标区域对所有鼠标按钮做出反应。您可以通过使用OR运算符(|)组合值在代码视图或绑定编辑器中添加对多个按钮的支持。有关可用的值的更多信息,请参阅接受按钮开发人员文档

"Adding accepted buttons in Binding Editor"

光标形状字段中,选择此鼠标区域的光标形状。在不显示鼠标光标的平台上,此值可能没有效果。

保持间隔字段中,指定一个值以覆盖在发出pressAndHold()信号之前经过的毫秒数。如果您没有显式设置该值或将其重置,它将遵循全局设置的应用程序样式提示。如果需要为特定的鼠标区域实例设置特定的时间间隔,请设置此值。

选择滚动手势复选框以响应对非鼠标设备的滚动手势,例如触摸板的2指轻扫手势。如果没有选择复选框,则只有在轮事件来自具有滚轮的实际鼠标时才会发出轮信号,而滚动手势事件将传递到任何其他将处理它们的组件。例如,当用户在包含鼠标区域实例的组件上执行轻扫手势时,可能会允许轻扫组件处理轻扫手势,而设置此属性为false将允许捏合区域组件处理鼠标滚轮或捏合手势。

关于鼠标位置和按钮点击的信息通过信号提供,为这些信号定义了事件处理程序属性。如果鼠标区域与其他鼠标区域组件的实例重叠,您可以通过选择传播事件复选框将clicked()doubleClicked()pressAndHold()事件传播到这些其他组件。每个事件都传播到堆叠顺序中下一个启用的鼠标区域,一直传播到接受事件的鼠标区域

高级鼠标区域属性

您可以将鼠标区域实例放置在轻扫等过滤子鼠标事件的组件中。但是,如果父组件识别出如轻扫之类的手势,鼠标事件可能会被从鼠标区域中窃取。

选择防止偷窃复选框以阻止鼠标事件被鼠标区域实例“偷走”。如果组件已经开始 stealing 事件,则此值将在下一个 press() 事件之前没有效果。

有关更多信息,请参阅鼠标区域组件的开发者文档。[链接]

拖动属性

您可以在拖动部分指定可拖动组件的属性。在目标字段中选择要拖动的组件。请注意,锚定组件不可拖动。

"Drag properties"

字段中,指定是否可以水平、垂直或同时进行拖动。

阈值字段中,设置像素阈值,拖动操作应在该阈值下开始。默认情况下,此值绑定到依赖平台的价值。

选择过滤子项复选框以启用拖动操作来覆盖子鼠标区域实例。这允许父鼠标区域实例处理拖动,例如,当子区域处理单击时。

选择平滑复选框以仅在拖动操作开始后才移动目标组件。如果未选中此复选框,则目标组件将直接移动到当前鼠标位置。

焦点范围

当按下或释放键时,会生成一个按键事件并将其传递给已关注的组件。如果没有组件具有活动的焦点,则忽略按键事件。如果具有活动焦点的组件接受按键事件,则传播停止。否则,事件被发送到组件的父元素,直到事件被接受,或者到达根组件并忽略事件。

高级部分中的焦点属性设置为true时,组件具有焦点。然而,对于可重用的或导入组件,这还不够,您应使用焦点范围组件。

在每个焦点范围内,一个对象可以启用焦点。如果有多个组件都有它启用,则最后启用它的组件将获得焦点,其他组件将取消设置,类似于没有焦点范围时的行为。

当焦点范围接收到活动焦点时,如果有设置焦点的包含组件(如果有),也获得活动焦点。如果该组件也是焦点范围,则焦点范围和子焦点组件都将获得活动焦点。

焦点范围组件不是视觉组件,因此需要将其子组件的属性暴露给焦点范围父组件。布局和定位器将使用这些视觉和样式属性来创建布局。[链接了两个部分]

有关更多信息,请参阅[b translate="no">Qt Quick中的键盘焦点。[链接]

可轻触成分

可轻触成分将其子组件放置在一个可拖动和轻触的表面,导致对子组件视图的滚动。这种行为是组件设计的基础,用于显示大量子组件,如列表视图网格视图。有关更多信息,请参阅[b translate="no">列表和网格视图。[链接]

在传统的用户界面上,视图可以通过标准的控件进行滚动,例如滚动条和箭头按钮。在某些情况下,也可以通过在移动光标时按住鼠标按钮来直接拖动视图。在基于触摸的用户界面上,这种拖动动作通常与轻触动作相结合,在用户停止触摸视图后继续滚动。

Flickable 组件的内容不会自动裁剪。如果该组件不是用作全屏组件,请考虑在 Visibility 部分的 Clip 复选框。

"Flickable properties"

如果将 Interactive 复选框设置为 true,则用户可以与 Flickable 组件交互。将其设置为 false 可暂时禁用滑动功能。这样可以实现与组件子项的特别交互。例如,在通过 Flickable 组件的子弹窗进行滚动时,可能希望冻结 Flickable 地图。

Flick direction 字段确定是否可以水平或垂直地滑动视图。选择 AutoFlickDirection 以在内容高度不等于 Flickable 的高度时垂直滑动,在内容宽度不等于 Flickable 的宽度时水平滑动。如果内容高度或宽度大于 Flickable,请选择 AutoFlickIfNeeded

Max. velocity 字段中,指定以像素/秒计的滑动视图的最大速度。在 Deceleration 字段中指定滑动减速的速率。

Movement 字段的值确定 Flickable 是否会给人一个感觉,即视图的边缘是柔性的,而不是硬的物理边界。选择 StopAtBounds 以自定义边缘效果,其中内容不会在 Flickable 的边界之外跟随拖动或滑动。选择 FollowBoundsBehavior 以根据 Behavior 字段的值使内容跟随 Flickable 边界之外的拖动或滑动。

Press delay 字段中,指定将按下信号延迟到 Flickable 子项的毫秒数。当在按下滑动动作可能产生不希望的影响之前对按下做出反应时,这很有用。如果在延迟时间内 Flickable 被拖动或滑动,则不会传递按下事件。如果在超时内释放按钮,则将传递按下和释放事件。

注意:对于已设置按下延迟的嵌套 Flickable,最内层的 Flickable 将重写外部 Flickable 的按下延迟。如果拖动超出平台拖动阈值,则无论此属性如何都会传递按下事件。

Pixel aligned 复选框将 Content XY 字段中设置的单位设置为像素(true)或亚像素(false)。将其设置为 true 以优化静态内容或具有高对比度边缘的移动内容,例如一像素宽的线条、文本或矢量图形。在优化动画质量时将其设置为 false

如果将 Synchronous drag 设置为 true,则在鼠标或触摸点移动足够远以开始拖动内容时,内容会跳跃,以便时按下鼠标或触摸点时位于光标或触摸点下的内容像素仍然位于该点下。默认值是 false,以增加在开始时失去一些拖动距离为代价,提供更平滑的体验。

可滑动几何体

Content size 字段指定由 Flickable 控制的表面的尺寸。通常,将 WH 字段的值设置为放置在 Flickable 中的组件的总大小。您还可以在 Left marginRight marginTop marginBottom margin 字段中设置内容周围额外的边距。

"Flickable geometry properties"

《原点》字段指定内容的来源。它与内容的左上角位置有关,无论布局方向如何。通常,XY 的值设置为 0。然而,由于代理大小变化、组件在可见区域外插入或删除,列表视图网格视图 可能具有任意的原点。

基本交互方法总结

以下表格列出了可用于向 UI 添加基本交互方法的组件,并提供它们的开发者文档链接。它们在 组件 > 默认组件 > 基本 中可用。 MCU 列表示哪些组件在 MCU 上受支持。

图标名称MCU用途
可滑动允许水平或垂直滚动组件。
聚焦范围在构建可重用组件时有助于处理键盘焦点。
鼠标区域允许简单的鼠标处理。

在特定 Qt 许可证下可用。
了解更多信息。