为用户界面添加交互功能

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

此外，您还可以创建预设UI 控件的实例，用于向用户显示应用程序的进度，或收集用户的输入。

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

• 鼠标区域
• 焦点范围
• 可轻扫区域
• 基本交互方法概览

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

创建鼠标区域

信号和处理程序用于传递鼠标交互。具体来说，您可以使用“Mouse Area ”组件来定义 JavaScript 回调（也称为信号处理程序），这些回调会接收定义区域内的鼠标事件。

定义鼠标区域的一种快捷方式是：先选中一个组件，然后在上下文菜单中选择“Add Mouse Area ”。这会将鼠标区域锚定在其父级区域上。如果父级是一个Rectangle（或任何从Item 派生的组件），则鼠标区域将填满由父级尺寸定义的区域。

您还可以定义比父组件区域更小或更大的区域。某些控件（例如按钮）本身就包含鼠标区域。

预定义信号

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

• 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 ”中，通过将值与“或”（|）运算符组合，为更多按钮添加支持。有关可用值的更多信息，请参阅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 接受该事件为止。

防止事件窃取

您可以将Mouse Area 实例放置在会过滤子元素鼠标事件的组件中，例如Flickable 。但是，如果父组件识别出某种手势（例如轻扫），鼠标事件可能会被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 可优化静态内容或具有高对比度边缘的动态内容，例如1像素宽的线条、文本或矢量图形。优化动画质量时，请将其设为false 。

如果将Synchronous drag 设置为true ，则当鼠标或触点移动到足以开始拖动内容时，内容会发生跳跃，从而确保按下时位于光标或触点下方的内容像素仍保持在该点下方。默认值为false ，这会提供更平滑的体验（无跳跃），但代价是初始阶段会损失部分拖动距离。

设置 Flickable 几何形状

在“Flickable Geometry ”部分中，“Content size ”字段指定了由“flickable”控制的区域的尺寸。通常，您应将“W ”和“H ”字段的值设置为放置在“flickable”中的组件的总尺寸。您还可以在“Left margin ”、“Right margin ”、“Top margin ”和“Bottom margin ”字段中设置内容周围的额外边距。

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

基本交互方法汇总

下表列出了可用于为用户界面添加基本交互方法的组件，并附有相关开发者文档的链接。这些组件可在Components >Default Components >Basic 中找到。“MCU 支持”列标明了哪些组件在 MCU 上受支持。