QML入门之创建可重用的组件(一)

我们在日常开发中都会封装一些组件以便于项目内重复利用。QML创建可重用组件一般有两种方法。

  1. 自定义Item
  2. 使用Component创建自定义组件

自定义Item

以一个自定义按钮举例:

javascript 复制代码
import QtQuick 2.12

Rectangle {
    id: root
    // 自定义属性
    property string btnDis: qsTr("button")
    property string pressedColor: "yellow"
    property string normalColor: "gray"
    property int btnw: 80
    property int btnh: 20
    signal btnClicked
    radius: 4

    width: disStr.width> root.width? disStr.width + 8 : btnw
    height: btnh
    color: mouseArea.pressed? pressedColor : normalColor
    
    Text {
        id: disStr
        anchors.centerIn: parent
        text: btnDis
    }

    MouseArea {
      id: mouseArea
      anchors.fill: parent
      onClicked: root.btnClicked()
    }
}

然后再主文件直接使用元素即可:

javascript 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
  id:root
  visible: true
  width: 640
  height: 480
  title: qsTr("简单窗口")

  RadiusButton {
    id: loginBtn
    anchors.centerIn: parent
    btnDis: qsTr("马大爷")
    btnh: 25
    pressedColor: "green"

    onBtnClicked: {
      console.log(qsTr("按钮点击了"))
    } 
  }
}

注意:

如果出现找不到组件,则检查下是否将组件添加到了qrc中,如下图:

如果并不是在根目录下则需要import相应的文件夹,如下:

在main.qml中 import "qrc:/ui"即可。

通常,自定义组件时我们会以一个Item作为根节点,可以防止用户通过基本属性改变我们设计的按钮的属性色。修改之后为:

javascript 复制代码
import QtQuick 2.12
Item {
  id: root
  // 自定义属性
  property string btnDis: qsTr("button")
  property string pressedColor: "yellow"
  property string normalColor: "gray"
  property int btnw: 80
  property int btnh: 20
  signal btnClicked

  width: rect.width
  height: rect.height

  Rectangle {
    id: rect
    anchors.fill: parent
    radius: 4

    width: disStr.width> rect.width? disStr.width + 8 : btnw
    height: btnh
    color: mouseArea.pressed? pressedColor : normalColor
    
    Text {
        id: disStr
        anchors.centerIn: parent
        text: btnDis
    }

    MouseArea {
      id: mouseArea
      anchors.fill: parent
      onClicked: root.btnClicked()
    }
  }
}

其中,disStr.width> rect.width? disStr.width + 8 : btnw 即自适应按钮文字大小。

相关推荐
江公望4 天前
Qt QtConcurrent使用入门浅解
c++·qt·qml
ajassi20006 天前
开源 C++ QT QML 开发(二)工程结构
linux·qt·qml
ajassi200011 天前
开源 C++ QT QML 开发(一)基本介绍
linux·qt·开源·qml
大橘15 天前
【qml-11】Quick3D实现机器人欧拉旋转、拖动视角
qt·3d·机器人·qml
大橘16 天前
【qml-12】Quick3D实现机器人鼠标拖拽转换视角(无限角度)与滚轮缩放
qt·3d·机器人·qml
钱彬 (Qian Bin)18 天前
企业级实战:构建基于Qt、C++与YOLOv8的模块化工业视觉检测系统(基于QML)
c++·qt·yolo·qml·工业质检·qt 5.15.2
大橘19 天前
【qml-10】Quick3D实现机器人渲染(mesh)记录
qt·机器人·qml
机器视觉知识推荐、就业指导20 天前
QML学习:1.快速了解QML
qt·学习·qml
DreamLife☼1 个月前
Qt 中的 Q_OBJECT 宏详解 —— 从源码到底层机制的全面剖析
qt·信号·qml·q_object··rtti·运行时类型信息
大橘2 个月前
【qml-5】qml与c++交互(类型单例)
qt·qml