QML键盘导航和高亮

code_shenbing

已于 2023-05-13 11:54:31 修改

阅读量349

点赞数

分类专栏： QML 文章标签： qt qml C++ 前端

于 2023-05-04 17:01:57 首次发布

本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/130490750

版权

QML 专栏收录该内容

41 篇文章 9 订阅

订阅专栏

一 QML介绍

二 QML的使用场合

三实例演示

一 QML介绍

QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：

移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三实例演示

当使用基于触摸方式的链表视图时，默认提供的视图已经足够使用。在使用键盘甚至仅仅通过方向键选择一个元素的场景下，需要有标识当前选中元素的机制。在QML中，这被叫做高亮。

视图支持设置一个当前视图中显示代理元素中的高亮代理。它是一个附加的代理元素，这个元素仅仅只实例化一次，并移动到与当前元素相同的位置。

在下面例子的演示中，有两个属性来完成这个工作。首先是focus属性设置为true，它设置链表视图能够获得键盘焦点。然后是highlight属性，指出使用的高亮代理元素。高亮代理元素的x,y与height属性由当前元素指定。如果宽度没有特别指定，当前元素的宽度也可以用于高亮代理元素。

在例子中，ListView.view.width属性被绑定用于高亮元素的宽度。关于代理元素的使绑定属性将在后面的章节讨论，但是最好知道相同的绑定属性也可以用于高亮代理元素。

1.import QtQuick 2.0
2.
3.Rectangle {
4.    width: 240
5.    height: 300
6.
7.    color: "white"
8.
9.    ListView {
10.        anchors.fill: parent
11.        anchors.margins: 20
12.
13.        clip: true
14.
15.        model: 100
16.
17.        delegate: numberDelegate
18.        spacing: 5
19.
20.        highlight: highlightComponent
21.        focus: true
22.    }
23.
24.    Component {
25.        id: highlightComponent
26.
27.        Rectangle {
28.            width: ListView.view.width
29.            color: "lightGreen"
30.        }
31.    }
32.
33.    Component {
34.        id: numberDelegate
35.
36.        Item {
37.            width: 40
38.            height: 40
39.
40.            Text {
41.                anchors.centerIn: parent
42.
43.                font.pixelSize: 10
44.
45.                text: index
46.            }
47.        }
48.    }
49.}

当使用高亮与链表视图（ListView）结合时，一些属性可以用来控制它的行为。highlightRangeMode控制了高亮如何影响视图中当前的显示。默认设置ListView.NoHighLighRange意味着高亮与视图中的元素距离不相关。

ListView.StrictlyEnforceRnage确保了高亮始终可见，如果某个动作尝试将高亮移出当前视图可见范围，当前元素将会自动切换，确保了高亮始终可见。

ListView.ApplyRange，它尝试保持高亮代理始终可见，但是不会强制切换当前元素始终可见。如果在需要的情况下高亮代理允许被移出当前视图。

在默认配置下，视图负责高亮移动到指定位置，移动的速度与大小的改变能够被控制，使用一个速度值或者一个动作持续时间来完成它。这些属性包括highlightMoveSpeed，highlightMoveDuration，highlightResizeSpeed和highlightResizeDuration。默认下速度被设置为每秒400像素，动作持续时间为-1，表明速度和距离控制了动作的持续时间。如果速度与动作持续时间都被设置，动画将会采用速度较快的结果来完成。

为了更加详细的控制高亮的移动，highlightFollowCurrentItem属性设置为false。这意味着视图将不再负责高亮代理的移动。取而代之可以通过一个行为（Bahavior）或者一个动画来控制它。

在下面的例子中，高亮代理的y坐标属性与ListView.view.currentItem.y属性绑定。这确保了高亮始终跟随当前元素。然而，由于我们没有让视图来移动这个高亮代理，我们需要控制这个元素如何移动，通过Behavior on y来完成这个操作，在下面的例子中，移动分为三步完成：淡出，移动，淡入。注意怎样使用SequentialAnimation和PropertyAnimation元素与NumberAnimation结合创建更加复杂的移动效果。

    Component {
        id: highlightComponent

        Item {
            width: ListView.view.width
            height: ListView.view.currentItem.height

            y: ListView.view.currentItem.y

            Behavior on y {
                SequentialAnimation {
                    PropertyAnimation { target: highlightRectangle; property: "opacity"; to: 0; duration: 200 }
                    NumberAnimation { duration: 1 }
                    PropertyAnimation { target: highlightRectangle; property: "opacity"; to: 1; duration: 200 }
                }
            }

            Rectangle {
                id: highlightRectangle
                anchors.fill: parent
                color: "lightGreen"
            }
        }
    }