为用户界面添加交互

您可以创建预设基本组件的实例，为用户界面添加交互方法，例如使用指向设备或键盘执行操作，或水平或垂直滑动屏幕的可见区域。这些组件可在Components >Default Components >Basic 中找到。

此外，您还可以创建预设用户界面控件的实例，以便通知用户应用程序的进度或收集用户的输入。

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

• 鼠标区域
• 焦点范围
• 可轻弹
• 基本交互方法摘要

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

创建鼠标区域

信号和处理程序用于实现鼠标交互。具体来说，你可以使用Mouse Area 组件来定义 JavaScript 回调（也称为信号处理器），从而接受定义区域内的鼠标事件。

定义鼠标区域的一个快速方法是选择一个组件，然后在上下文菜单中选择Add Mouse Area 。这会将鼠标区域锚定到其父对象的区域。如果父组件是矩形（或任何从项派生的组件），鼠标区域将填充父组件尺寸所定义的区域。

您也可以定义一个比父对象小或大的区域。一些控件（如按钮）包含一个鼠标区域。

预定义信号

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

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

启用鼠标区域

Mouse Area 是一种不可见的组件，通常与可见组件结合使用，以便为该组件提供鼠标处理功能。通过有效地充当代理，鼠标处理的逻辑可以包含在Mouse Area 组件中。

创建鼠标区域

• 在Navigator 或2D 视图中选择一个组件，然后在上下文菜单中选择Add Mouse Area 。
• 从Components 拖动Mouse Area 组件：
  1. 转到Components >Default Components >Basic 。
  2. 将Mouse Area 组件拖动到Navigator 或2D 视图中的另一个组件。

在Properties 中，在Mouse Area 部分，Area 启用代理组件的鼠标处理功能。

设置悬停

默认情况下，Mouse Area 组件只报告鼠标点击，而不报告鼠标光标位置的变化。选择Hover 可确保使用适当的处理程序，并在必要时更新其他属性的值，即使没有按下鼠标按钮也是如此。

使鼠标区域对鼠标事件透明

尽管Mouse Area 是一个不可见的组件，但它有一个Visible 属性。清除Visibility 部分中的Visible ，使鼠标区域对鼠标事件透明。

响应鼠标按钮

在Mouse Area 部分的Accepted buttons 字段中，选择鼠标区域响应的鼠标按钮。

选择AllButtons 可使鼠标区域对所有鼠标按钮做出反应。

您可以在Code 视图、Edit 模式或Binding Editor 中使用 OR 运算符 (|) 组合这些值，从而添加对更多按钮的支持。有关可用值的更多信息，请参阅MouseArea::acceptedButtons 。

设置光标形状

在Cursor shape 字段中，选择该鼠标区域的光标形状。在不显示鼠标光标的平台上，该值可能不起作用。

设置信号保持间隔

在Hold interval 字段中，指定一个值以毫秒为单位覆盖pressAndHold() 信号发出前的经过时间。如果没有显式设置该值或该值被重置，它将遵循全局设置的应用程序样式提示。如果需要为特定的Mouse Area 实例设置特定的时间间隔，请设置该值。

响应滚动手势

选择Scroll gesture 以响应非鼠标设备的滚动手势，例如触控板上的双指轻弹手势。如果未选择复选框，则只有当滚轮事件来自带滚轮的实际鼠标时，才会发出滚轮信号，而滚动手势事件则会传递到其他任何可以处理这些事件的组件。

例如，当光标位于一个包含Mouse Area 实例的组件上方时，用户可能会执行一个轻移手势，目的是与下方的Flickable 组件进行交互。将此属性设置为false 将允许PinchArea 组件处理鼠标滚轮或捏合手势，而Flickable 则处理轻移手势。

传播事件

有关鼠标位置和按钮点击的信息是通过信号提供的，而事件处理器属性则是通过信号定义的。如果鼠标区域与Mouse Area 组件其他实例的区域重叠，则可通过选择Propagate events 将clicked() 、doubleClicked() 和pressAndHold() 事件传播到这些其他组件。每个事件都会按堆叠顺序传播到其下方的下一个启用的Mouse Area ，一直向下传播，直到Mouse Area 接受事件为止。

防止窃取

您可以在过滤子鼠标事件的组件（如Flickable ）中放置一个Mouse Area 实例。但是，如果父组件识别到一个手势（如轻移），鼠标事件可能会从Mouse Area 被窃取。

选择Prevent stealing 可阻止鼠标事件从Mouse Area 实例中窃取。如果在组件开始窃取事件后设置该值，则在下一次press() 事件发生前不会生效。

如需了解更多信息，请参阅MouseArea 。

设置拖动属性

在Drag 部分指定拖动组件的属性。在Target 字段中选择要拖动的组件。请记住，锚定的组件不能拖动。

在Axis 字段中，指定是否可以水平、垂直或两者拖动。

在Threshold 字段中，以像素为单位设置拖动操作开始的阈值。默认情况下，该值与平台相关值绑定。

选择Filter children 可使拖动覆盖后代Mouse Area 实例。例如，这将使父Mouse Area 实例能够处理拖动，而子代区域则处理点击。

选择Smoothed 可仅在拖动操作开始后移动目标组件。如果未选择该复选框，目标组件将直接移动到当前鼠标位置。

设置焦点范围

按下或松开按键时，将生成一个按键事件并传递给聚焦组件。如果没有激活焦点的组件，按键事件将被忽略。如果有活动焦点的组件接受了按键事件，传播就会停止。否则，事件将发送到组件的父组件，直到事件被接受，或到达根组件并忽略事件。

当Advanced 部分中的Focus 属性设置为true 时，组件就有了焦点。不过，对于可重复使用或导入的组件来说，这还不够，应该使用Focus Scope 组件。

要创建Focus Scope 组件的实例，请访问Components >Default Components >Basic 。

在每个焦点范围内，一个对象可以启用焦点功能。如果有多个组件启用了焦点功能，则最后启用焦点功能的组件将拥有焦点，其他组件则未被设置，这与没有焦点范围时的情况类似。

当一个焦点范围获得主动焦点时，所包含的已设置焦点的组件（如果有的话）也会获得主动焦点。如果该组件也是一个焦点范围，那么焦点范围和子焦点组件都将获得主动焦点。

Focus Scope 组件不是可视化组件，因此其子组件的属性需要暴露给焦点范围的父组件。布局和定位器将使用这些可视化和样式属性来创建布局。

如需了解更多信息，请参阅 Qt Quick 中的键盘焦点。

创建可闪烁组件

Flickable 组件将其子组件放在一个表面上，用户可以拖动和轻移该表面，从而使子组件上的视图滚动。这种行为是显示大量子组件的组件的基础，如List View 和Grid View 。更多信息，请参阅列表视图和网格视图。

在传统的用户界面中，用户可以使用标准控件（如滚动条和箭头按钮）滚动视图。有时，用户可以在移动光标的同时按住鼠标键直接拖动视图。在基于触摸的用户界面中，这种拖动操作通常会辅以滑动操作，即在用户停止触摸视图后继续滚动。

剪切可弹动组件

Flickable 组件的内容不会自动剪切。如果组件不用作全屏组件，可考虑在Visibility 部分选择Clip 。

启用闪烁

创建可闪烁组件

1. 转到Components >Default Components >Basic 。
2. 拖动一个Flickable 组件到Navigator 或2D 视图。
3. 在Flickable 部分，将Interactive 设置为true 。

   

将Interactive 设置为false ，以暂时禁用弹动功能。这样就可以与组件的子组件进行特殊交互。例如，当滚动浏览Flickable 组件的子组件弹出式窗口时，您可能希望冻结可弹动地图。

设置弹动方向

在Flickable 部分，设置Flick direction 以确定用户是否可以水平或垂直轻移视图。

如果内容高度不等于可弹动视图的高度，则选择AutoFlickDirection 以启用垂直弹动；如果内容宽度不等于可弹动视图的宽度，则选择 以启用水平弹动。

如果内容高度或宽度大于可弹动内容的高度或宽度，请选择AutoFlickIfNeeded 。

设置闪烁速度

在Flickable 部分，在Max. velocity 字段中以像素/秒为单位设置弹动视图的最大速度。

在Deceleration 字段中设置弹动减速的速度。

设置移动

在Flickable 部分，设置Movement 字段的值，以确定可闪动视图的边缘是否显得柔和，而不是坚硬的物理边界。

选择StopAtBounds 可获得自定义边缘效果，在这种效果下，内容不会跟随拖动或轻移超出可闪烁边缘的范围。

选择FollowBoundsBehavior ，根据Behavior 字段的值，内容会跟随拖动或闪动超出可闪动边界。

在Press delay 字段中，以毫秒为单位指定向可闪烁子代发送按压延迟的时间。这对于在弹动操作产生不良影响之前对按压做出反应非常有用。如果用户在延迟超时前拖动或轻弹可闪烁体，则不会发送按压事件。如果在超时内释放按钮，则会同时发送按压和释放事件。

Pixel aligned 将Content X 和Y 字段中设置的对齐单位设置为像素 (true) 或子像素 (false)。将其设置为true ，可优化具有高对比度边缘的静态内容或移动内容，如一像素宽的线条、文本或矢量图形。优化动画质量时，将其设置为false 。

如果Synchronous drag 设置为true ，那么当鼠标或触摸点移动到足以开始拖动内容时，内容将跳转，这样按下时位于光标或触摸点下方的内容像素将保持在该点的下方。默认值为false ，这样可以提供更流畅的体验（无跳转），但代价是在开始时会损失一些拖动距离。

设置可闪烁几何体

在Flickable Geometry 部分，Content size 字段指定了可弹动曲面控制的曲面尺寸。通常情况下，您可以将W 和H 字段的值设置为放置在可闪烁组件中的组件的总尺寸。您可以在Left margin,Right margin,Top margin 和Bottom margin 字段中设置内容周围的额外边距。

Origin 字段指定内容的原点。它指的是内容的左上角位置，与布局方向无关。通常情况下，X 和Y 的值设置为 0。但是，由于委托的大小变化，或在可见区域外插入或移除组件，List View 和Grid View 的原点可能是任意的。

基本交互方法概述

下表列出了可用于向用户界面添加基本交互方法的组件及其开发人员文档链接。这些组件可在Components >Default Components >Basic 中找到。MCU 支持列显示 MCU 支持哪些组件。