QT QML 练习4

效果:鼠标按下Tab建可以选选择标签或者方块之间的切换

这段代码使用了 QtQuick 框架,创建了一个包含两个 Text 元素和两个嵌套 Rectangle 的用户界面。以下是对代码中涉及的主要知识点和实现细节的介绍:

知识点及代码细节介绍

  1. 导入 QtQuick

    qml 复制代码
    import QtQuick
    • QtQuick 是一个用于创建现代图形用户界面的核心模块,包含布局、动画、用户交互等功能。
  2. 根容器 (Rectangle)

    qml 复制代码
    Rectangle {
        id: root
        width: 600
        height: 300
    }
    - `Rectangle` 作为整个界面的根容器。
    - 设置 `width` 和 `height` 为 600 和 300 像素,定义了窗口的大小。
    - `id: root` 用于标识该矩形,其他元素可以通过 `root` 来引用该对象。
  3. Text 元素 - thisLabel

    qml 复制代码
    Text {
        id: thisLabel
        width: 150
        height: 100
        x: 24
        y: 100
        ...
    }
    • Text 元素用于显示文本内容。
    • 设置 id: thisLabel,标识符用于唯一标识该元素,方便在代码中引用。
    • widthheight 设置了文本框的大小为 150x100 像素。
    • x: 24y: 100 设置了文本框在 root 容器内的相对位置。
  4. 嵌套的 Rectangle

    qml 复制代码
    Rectangle {
        anchors.fill: parent
        color: "yellow"
        z: parent.z - 1
    }
    • Rectangle 作为嵌套在 Text 内部的背景元素。
    • 使用 anchors.fill: parent 使得背景矩形填满 Text 元素的区域。
    • color: "yellow" 设置了背景颜色为黄色。
    • z: parent.z - 1 设置了 z 值,以控制元素的层次顺序。z 值越小,越靠后显示,因此该矩形会在文本内容的背后显示。
  5. 自定义属性 (property) 和别名属性 (property alias)

    qml 复制代码
    property int times: 24
    property alias anotherTimes: thisLabel.times
    • property int times: 24 定义了一个自定义整数属性 times,初始值为 24。该属性可以用于存储和管理与该对象相关的数据。
    • property alias anotherTimes: thisLabel.times 定义了一个属性别名,将 thisLabeltimes 属性作为一个引用,这样其他组件可以通过 anotherTimes 来访问或修改 thisLabel.times 的值。
  6. 设置文本内容 (text)

    qml 复制代码
    text: "thisLabel " + anotherTimes
    • text 属性用于设置 Text 元素显示的内容。
    • 这里使用字符串连接的方式将 "thisLabel "anotherTimes(即 thisLabel.times)连接在一起,用于显示动态内容。
  7. 字体属性 (font)

    qml 复制代码
    font.family: "Ubuntu"
    font.pixelSize: 16
    • font 是一个分组属性,包含了字体设置。
    • font.family: "Ubuntu" 设置字体为 Ubuntu 字体。
    • font.pixelSize: 16 设置字体的大小为 16 像素。
  8. 键盘导航 (KeyNavigation)

    qml 复制代码
    KeyNavigation.tab: thatLabel
    • KeyNavigation 是一个附加属性,用于处理键盘事件,例如焦点的移动。
    • KeyNavigation.tab: thatLabel 表示按下 Tab 键时,将焦点移到 thatLabel 元素。
  9. 信号处理程序 (onHeightChanged)

    qml 复制代码
    onHeightChanged: console.log('height:', height)
    • onHeightChanged 是一个信号处理程序,当 Text 元素的 height 属性发生变化时会被触发。
    • 使用 console.log('height:', height) 打印当前的高度值,便于调试。
  10. 焦点管理 (focus)

    qml 复制代码
    focus: true
    • focus: true 表示该元素有焦点,能够接收键盘输入。
    • focus 也用来控制文本颜色,如果当前元素有焦点,则文本为红色 (color: focus ? "red" : "black"),否则为黑色。
  11. 第二个 Text 元素 - thatLabel

    qml 复制代码
    Text {
        id: thatLabel
        width: thisLabel.width
        height: thisLabel.height
        x: thisLabel.x + thisLabel.width + 20
        y: thisLabel.y
        ...
    }
    • 定义了另一个 Text 元素,标识符为 thatLabel
    • 它的宽度和高度与 thisLabel 相同,确保两个文本框大小一致。
    • 通过 x 设置,使 thatLabel 位于 thisLabel 的右侧,并有 20 像素的间距。
    • 该元素也有一个嵌套的 Rectangle,颜色设置为粉色 (color: "pink"),并位于文本的背后 (z: parent.z - 1)。
  12. 键盘焦点切换

    qml 复制代码
    focus: !thisLabel.focus
    KeyNavigation.tab: thisLabel
    • focus: !thisLabel.focus 表示当 thisLabel 没有焦点时,thatLabel 会获得焦点。
    • 通过 KeyNavigation.tab 属性,按下 Tab 键可以将焦点切换回 thisLabel

需要注意的知识点

  1. 嵌套组件及相对布局

    • 代码中使用了嵌套的 Rectangle 元素作为背景,同时通过 anchors.fill: parent 来填满父组件。
    • 使用 xy 设置了元素的绝对位置,也可以考虑使用 anchors 来实现更灵活的相对布局,适应不同尺寸的窗口。
  2. 属性系统

    • propertyproperty alias 是 QML 中非常重要的概念,用于定义和引用属性。
    • property alias 可以让不同组件共享属性,方便数据的访问和管理。
  3. 键盘事件和焦点管理

    • KeyNavigationfocus 用于处理键盘焦点的切换。
    • 焦点管理在交互式界面设计中非常重要,确保用户可以通过键盘顺利地切换和控制元素。
  4. z 值控制元素层次

    • 使用 z 控制元素的前后显示顺序,z 值越大,元素越靠前显示。
    • 可以通过设置 z 值调整文本和背景矩形之间的显示关系。
  5. 动态文本和信号处理

    • 通过连接字符串的方式实现动态文本更新。
    • 信号处理器 (onHeightChanged) 用于监测属性的变化,这在调试和动态界面更新中非常有用。

这段代码展示了如何使用 QtQuick 实现一个具有动态属性、键盘导航、和简单动画效果的用户界面。掌握这些基础知识是创建复杂和交互式 QML 应用的关键。

c 复制代码
import QtQuick

Rectangle {
    id: root
    width: 600
    height: 300

    Text {
        // (1) identifier
        id: thisLabel

        // 设置宽度和高度
        width: 150
        height: 100

        // (2) set x- and y-position
        x: 24
        y: 100

        Rectangle {
            anchors.fill: parent
            color: "yellow"
            z: parent.z - 1
        }

        // (4) custom property
        property int times: 24

        // (5) property alias
        property alias anotherTimes: thisLabel.times

        // (6) set text appended by value
        text: "thisLabel " + anotherTimes

        // (7) Font is a grouped property
        font.family: "Ubuntu"
        font.pixelSize: 16

        // (8) KeyNavigation is an attached property
        KeyNavigation.tab: thatLabel

        // (9) Signal handler for property changes
        onHeightChanged: console.log('height:', height)

        // Focus is needed to receive key events
        focus: true

        color: focus ? "red" : "black"
    }

    Text {
        id: thatLabel

        // 设置与 thisLabel 相同的宽度和高度
        width: thisLabel.width
        height: thisLabel.height

        // 设置位置在 thisLabel 右边,并有 20 像素的间距
        x: thisLabel.x + thisLabel.width + 20
        y: thisLabel.y

        Rectangle {
            anchors.fill: parent
            color: "pink"
            z: parent.z - 1
        }

        text: "thatLabel"
        font.family: "Ubuntu"
        font.pixelSize: 16
        focus: !thisLabel.focus
        KeyNavigation.tab: thisLabel
        color: focus ? "red" : "black"
    }
}
相关推荐
数据小爬虫@2 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.4 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Narutolxy9 分钟前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader17 分钟前
全面解析 Golang Gin 框架
开发语言·golang·gin
禁默27 分钟前
深入浅出:AWT的基本组件及其应用
java·开发语言·界面编程
Code哈哈笑37 分钟前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
程序猿进阶40 分钟前
深入解析 Spring WebFlux:原理与应用
java·开发语言·后端·spring·面试·架构·springboot
qq_4336184442 分钟前
shell 编程(二)
开发语言·bash·shell
charlie1145141911 小时前
C++ STL CookBook
开发语言·c++·stl·c++20
袁袁袁袁满1 小时前
100天精通Python(爬虫篇)——第113天:‌爬虫基础模块之urllib详细教程大全
开发语言·爬虫·python·网络爬虫·爬虫实战·urllib·urllib模块教程