当前位置： 首页 > article >正文

QML学习(九) Qt Quick - Control2中的主要组件：Label组件和Button组件的属性和使用方法

article 2025/1/9 8:29:05

在Qt Quick - Control2中基本包含了我们常用的各式组件，虽然看起来不算太多，但这些组件就是我们进行自定义设计一些复杂组件的基础。
在这里插入图片描述
本篇文章就来讲讲这些组件中最常用的两个组件：Label和Button

Label

在 QML 中，Label 组件主要用于显示文本信息。它可以设置文本的内容、字体、颜色、对齐方式、大小等属性，为用户提供一种方便的文本显示方式。可以作为用户界面中的文本标签，用于显示标题、说明、提示信息等等；

基本属性

text：用于设置显示的文本内容，是 Label 最基本的属性，可显示静态文本或根据程序逻辑动态更新的文本。
color：设置文本的颜色，可使用颜色名称、十六进制值等方式指定，如 “blue”、“#333333”，用于美化和区分不同的文本标签。
font：是一个分组属性，用于字体设置，包括字体的 family、pointSize、weight 和 style 等。如font.family: "Arial"指定字体为 Arial，font.pointSize: 20设置字体大小为 20，font.bold: true使字体加粗，可使文本更美观、易读。
对齐和布局属性
horizontalAlignment：水平对齐方式，取值如 Qt.AlignLeft、Qt.AlignRight、Qt.AlignHCenter 等，用于将文本在水平方向上按照指定方式对齐，使界面布局更整齐。
verticalAlignment：垂直对齐方式，取值如 Qt.AlignTop、Qt.AlignBottom、Qt.AlignVCenter 等，可将文本在垂直方向上进行对齐，常与水平对齐方式配合使用，以确定文本在标签中的准确位置。
wrapMode：文本换行模式，可选 Text.NoWrap、Text.WordWrap、Text.WrapAnywhere 等，当文本内容较长时，可控制文本是否自动换行以及换行的方式，避免文本超出标签范围。
文本样式属性
style：文本样式，如 Text.Normal、Text.Outline、Text.Raised、Text.Sunken 等，可为文本添加特殊的样式效果，如阴影、立体等，增强文本的视觉效果。
styleColor：用于文本样式的颜色，如设置阴影或轮廓的颜色，需与 style 属性配合使用，以实现更丰富的文本样式。

文本效果属性

font ：font.underline、font.strikeout：分别用于设置文本的下划线和删除线样式，可用于强调或标记特定的文本内容。
elide：省略模式，可选 Text.ElideLeft、Text.ElideRight、Text.ElideMiddle，当文本无法完整显示时，可按照指定方式省略部分文本，并显示省略号，以提示用户文本内容未完全显示。

高级属性

lineHeight：lineHeight和lineHeightMode：行高和行高模式，可用于精确控制文本行与行之间的间距，使多行文本的排版更加美观、合理。
renderType：渲染类型，如 Text.QtRendering、Text.NativeRendering，在不同的平台和性能要求下，可选择合适的渲染类型以优化文本的显示效果和性能。

交互属性

selectable：是否可以选择文本，设置为 true 时，用户可以长按并选择文本内容，常用于需要复制、粘贴文本的场景。
truncated：文本是否被截断，只读属性，可用于判断文本是否因为空间不足等原因而被截断，以便在程序中进行相应的处理。

其他设置：

selectable：设置文本是否可被选择，若设置为 true，则用户可以在界面上选中并复制文本内容，默认为 false。
truncated：用于判断文本是否被截断，当文本内容超出显示区域且未设置换行或省略模式时，该属性可用于获取文本是否被截断的状态。
background：可以为 Label 设置背景项目，如添加一个 Rectangle 作为背景，设置其颜色、边框等属性来美化或突出显示 Label

辅助功能属性

accessible.name和accessible.description：用于辅助技术的文本标签和描述，为视力障碍等特殊用户提供了更好的可访问性支持，使屏幕阅读器等辅助工具能够准确地读取和描述标签的内容。

使用场景

显示静态文本：如应用程序的标题、界面中的说明文字、按钮上的固定文字等，可直接使用 Label 的 text 属性进行设置。
显示动态文本：在需要根据程序的运行状态或用户的操作动态更新文本内容的场景中，可通过绑定或在 JavaScript 函数中修改 text 属性的值来实现，如实时显示系统时间、网络连接状态等。
文本排版和格式化：利用对齐、换行、文本样式等属性，可以对文本进行排版和格式化，使其更符合界面设计的要求，如制作多行文本标签、设置标题的样式等。
用户交互提示：在需要用户进行操作的地方，使用 Label 显示提示信息，如在文本输入框旁边显示输入格式的提示、在按钮上显示操作说明等，可提高用户体验。
辅助功能支持：通过设置辅助功能属性，为特殊用户提供更好的可访问性，使应用程序更具包容性，符合无障碍设计的原则
基本使用方法如下：

import QtQuick 2.0

Item {
    width: 200
    height: 200
    Label {
        text: "Hello, World!"
        anchors.centerIn: parent
    }
}

下面介绍Label的一些使用方法：
**（1）文字显示：**文字显示放在text属性中，text: “Hello, World!”：设置 Label 的显示文本为 “Hello, World!”
**(2) 字体属性：**设置Label中文字的字体如下：

Label {
        text: "Hello, World!"
        anchors.centerIn: parent
        font.family: "Arial"
        font.pixelSize: 20
        font.bold: true
        font.italic: true
    }

（3）设置字体颜色：

Label {
        text: "Hello, World!"
        anchors.centerIn: parent
        color: "red"
        background: Rectangle {
            color: "lightgray"
        }
    }

（4）设置文本对齐方式：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Label {
        x: 100
        y: 100
        width: 100
        height: 50
        text: qsTr("我是标签")
        color: "red"
        font.pixelSize: 22
        font.bold: true  // 设置字体加粗
        font.underline: true  // 设置下划线
        font.strikeout: true  // 设置删除线

        // 设置文本样式为阴影效果
        style: Text.Outline
        styleColor: "black"
    }
}

Button

通用属性

text：用于设置按钮上显示的文本内容，向用户清晰地表明按钮的功能。如 “提交”“取消”“确定” 等；

Button {
    text: "提交"
    onClicked: {
        console.log("提交按钮被点击")
    }
}

enabled：控制按钮是否可用，默认为 true。当设置为 false 时，按钮会变灰，无法响应点击事件，常用于在某些条件不满足时禁用按钮；

Button {
    text: "保存"
    enabled: false
}

pressed：表示按钮是否被按下，是只读属性，通常在按钮按下时改变按钮的外观或执行特定操作；

Button {
    text: "按下我"
    onClicked: {
        if (pressed) {
            console.log("按钮被按下并点击")
        }
    }
}

hovered：表示鼠标是否悬停在按钮上，只读属性，可用于实现鼠标悬停时按钮的特效，如改变颜色、显示提示信息等；

Button {
    text: "悬停看效果"
    onHoveredChanged: {
        if (hovered) {
            console.log("鼠标悬停在按钮上")
        }
    }
}

flat：如果设置为 true，按钮将没有背景，默认为 false，常用于创建简洁的扁平风格按钮；

Button {
    text: "扁平按钮"
    flat: true
    onClicked: {
        console.log("扁平按钮被点击")
    }
}

图标相关属性

icon.source：设置按钮的图标，可以是图片路径或图标名称，用于增强按钮的可视化效果，让用户更直观地理解按钮的功能；

Button {
    text: "带图按钮"
    icon.source: "qrc:/icons/save.png"
    onClicked: {
        console.log("带图按钮被点击")
    }
}

icon.color：设置图标的颜色，如果未设置透明，可能会覆盖icon.source设置的图片颜色；

Button {
    text: "变色图标按钮"
    icon.source: "qrc:/icons/save.png"
    icon.color: "red"
    onClicked: {
        console.log("变色图标按钮被点击")
    }
}

可选中按钮相关属性

checkable：控制按钮是否可以被选中（切换状态），默认为 false，常用于创建复选框、单选按钮等可切换状态的按钮；

Button {
    text: "可选中按钮"
    checkable: true
    onClicked: {
        if (checked) {
            console.log("按钮被选中")
        } else {
            console.log("按钮未被选中")
        }
    }
}

checked：表示按钮是否被选中，只有在checkable为 true 时有效；

Button {
    text: "已选中按钮"
    checkable: true
    checked: true
    onClicked: {
        if (checked) {
            console.log("按钮已被选中并点击")
        }
    }
}

autoRepeat：控制按钮是否自动重复触发点击事件，默认为 false，常用于需要连续触发操作的场景，如游戏中的射击按钮；

Button {
    text: "自动重复按钮"
    autoRepeat: true
    autoRepeatDelay: 500
    autoRepeatInterval: 300
    onClicked: {
        console.log("自动重复按钮被点击")
    }
}

autoRepeatDelay：自动重复触发点击事件的延迟时间，主要用一些防止误触，可以稍微加长时间的场景。单位为毫秒，默认 300ms；

autoRepeatInterval：自动重复触发点击事件的时间间隔，同样用在一些防止误触，可以稍微加长时间的场景。单位为毫秒，默认 200ms；

外观和布局相关属性

display：用于控制图标和文本显示位置，如AbstractButton.IconOnly表示只显示图标，AbstractButton.TextBesideIcon表示文本在图标旁边等；

Button {
    text: "图标在左按钮"
    icon.source: "qrc:/icons/save.png"
    display: AbstractButton.IconLeftTextRight
}

width和height：设置按钮的宽度和高度，用于精确控制按钮的大小，以适应不同的布局需求；

其他属性

isDefault：按钮是否为默认按钮，默认按钮决定了当没有给按钮一个显式的焦点时，用户在窗口按下 Enter 键将会发生的操作，默认为假。
menu：给按钮分配一个菜单，能获得下拉菜单按钮，默认为空。
style：按钮的样式，可用于自定义按钮的外观，如背景颜色、边框、字体等

整体举例说明各个常见属性的使用：

import QtQuick 2.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 400
    height: 300
    title: "Button Example"

    Button {
        id: myButton
        // 按钮上显示的文本
        text: "多功能按钮"
        // 按钮是否可用
        enabled: true
        // 是否为扁平风格
        flat: false
        // 是否可选中
        checkable: true
        // 是否选中
        checked: false
        // 图标来源
        icon.source: "qrc:/icons/button_icon.png"
        // 图标颜色
        icon.color: "blue"
        // 显示模式，图标在左，文本在右
        display: AbstractButton.IconLeftTextRight
        // 按钮的宽度
        width: 200
        // 按钮的高度
        height: 50
        // 自动重复触发点击事件
        autoRepeat: true
        // 自动重复触发延迟时间
        autoRepeatDelay: 300
        // 自动重复触发间隔时间
        autoRepeatInterval: 200
        // 鼠标悬停时的事件处理
        onHoveredChanged: {
            if (hovered) {
                console.log("鼠标悬停在按钮上")
            }
        }
        // 按下时的事件处理
        onClicked: {
            if (checked) {
                console.log("按钮被选中且点击")
            } else {
                console.log("按钮未被选中但点击")
            }
        }
        // 当按钮状态改变时的处理
        onCheckedChanged: {
            if (checked) {
                console.log("按钮状态变为选中")
            } else {
                console.log("按钮状态变为未选中")
            }
        }
        // 按钮的位置
        anchors.centerIn: parent
    }
}

http://www.kler.cn/a/472706.html

相关文章：

  • 【cuda学习日记】2.2 使用2维网络（grid）和2维块（block）对矩阵进行求和
  • Agent | Dify中的两种可选模式
  • c++ 17 constexpr
  • 详细讲一下什么是闭包，为什么会产生闭包，闭包会导致什么，闭包可以帮助我们在开发中干什么
  • Kubernetes集群架构
  • LAMP搭建
  • 机器学习模型评估指标
  • 页面转 PDF 功能的实现思路与使用方法
  • 【算法】八大排序算法
  • PostgreSQL 插件的事务回调机制
  • 怎么把word试题转成excel？
  • 在windows系统上安装docker并自定义安装和数据存储位置
  • No Homebrew ruby 2.6.3_2 available for arm64 processors！
  • 微软Office存在的意义是什么？
  • 【深度学习量化交易12】基于miniQMT的量化交易框架总体构建思路——回测、模拟、实盘通吃的系统架构
  • 显示器太薄怎么用屏幕挂灯？2025最新屏幕挂灯什么牌子好
  • 如何在 LobeChat 中使用 Ollama
  • 《网络安全里的Linux基础：构建安全网络的关键基石》
  • Python爬虫基础——数据清洗
  • python虚拟环境的使用
  • 【2024华为OD-E卷-200分-会议接待】（题目+思路+JavaC++Python解析)
  • Pytorch学习12_最大池化的使用
  • Elastic-Job相关
  • 案例解读 | 香港某多元化综合金融企业基础监控+网管平台建设实践
  • 微信小程序动态更改富文本的css样式
  • Jenkins-持续集成、交付、构建、部署、测试