QML编写自定义组件

前言

我们在使用qml的过程中经常会根据自己的特殊需求定制各种控件，为了方便使用和代码复用，会考虑将控件抽象出来写在一个新的qml文件中，这样就形成了一个控件。注意文件名开头大写，不然无法识别。

代码示例

import QtQuick 2.12
import QtQuick.Controls 2.5

Item {
   id:root
   width: 200
   height: 20
   property alias backgroundColor: searchBox.color
   property alias radius: searchBox.radius
   property alias textColor: searchText.color
   property alias text: searchText.text

   signal searched()
   Rectangle{
       id : searchBox
       anchors.fill: parent
       radius: 10
       color: "darkGrey"

       TextInput{
           id : searchText
           text: qsTr("输入关键字")
           color: "white"
           selectByMouse: true
           width: parent.width
           height: parent.height
           anchors.verticalCenter: parent.verticalCenter
       }

       Image {
           id: searchIcon
           source: "qrc:/Images/search.png"
           anchors.verticalCenter: parent.verticalCenter
           anchors.right: parent.right
           width: parent.width
           height: parent.height
           MouseArea{
               anchors.fill: parent
               onClicked: {
                   searched();
               }
           }
       }

   }
}

导出的控件顶层元素最好使用Item，在其他地方使用这个控件的时候，无法直接访问Item的子控件的属性，所以为了方便可以将这些需要的属性的暴露给使用者，用法property alias name : subItem.property。signal 是定义信号，开头小写，括号里面可以传递参数。使用者使用这个信号时，使用onSearched: {}。注意先添加一个on，然后首字母大写。为了代码方便管理，可能将新的qml组件放在另外一个目录,这样就无法直接使用。那么使用的时候需要导入该文件夹，用法

import ““ [as ]

这个目录可以使用相对目录，例如“./Component”