在QML中如何使用首字母小写（蛇形）命名法

前言

最近在学习研究QML，想要自定义组件、信号、属性等，但如何对.qml文件、变量命名却是个问题。习惯了蛇形命名规范后，再让我回到驼峰命名规范，多少是不愿意的。

为了坚守信仰，我翻遍了各大技术网站，然而得到的答复始终就那几篇被转载无数次的文章，几乎都是让用首字母大写的命名规范。

算了，自己摸索试验吧！

答案

场景

自定义一个组件，文件名为my_btn.qml，想要在其它文件中使用该组件，并且声明此类型组件时使用名称MyBtn。

my_btn.qml中还声明了属性变量btn_color，想要在事件中监听该属性值的变化并进行处理。

在QtCreator中的工程目录结构如下：

在文件资源管理器中的目录结构如下：

其中my_btn.qml与qmldir文件需要位于同一目录components下，qmldir文件是特殊文件，用于描述一个模块及其中包含的组件类型、模块版本号等。

test.qml文件与components文件夹位于同一目录untitled3下，test.qml文件中会使用到模块components里的自定义组件MyBtn。

方法

话不多说，直接上代码。

• untitled3.pro

// qml工程需要包含`quickwidgets`
QT       += core gui quickwidgets

// 声明qml文件根目录
QML_DIR = $$PWD

// 这里导入环境变量，路径为qml文件根目录
QML_IMPORT_PATH += \
    $$QML_DIR

// 添加`qmldir`文件到工程中，用于模块管理
OTHER_FILES += \
    $$QML_DIR/components/qmldir

// 添加工程中所使用到的`.qml`文件，可以用通配符`*`，但它不能匹配多级目录
DISTFILES += \
    $$QML_DIR/*.qml  \
    $$QML_DIR/components/*.qml

• qmldir

# 声明模块名称为`components`
module components

// 组件名称，版本号，组件源文件路径
MyBtn		1.0		my_btn.qml

• my_btn.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle {
    // 声明属性`btn_color`
    property color btn_color: '#f00'

    width: 88
    height: 32
    // 绑定属性
    color: btn_color
}

• test.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

// 导入模块`components 1.0`，注意版本号需要与`qmldir`中声明的相匹配
import components 1.0

Item {
    // 使用`my_btn.qml`所定义的组件`MyBtn`
    MyBtn {
        btn_color: 'red'
    }
}

关于我

我是一位喜欢创新、乐观向上的少年
爱好是看书、踢足球、玩LOL等
喜欢我的文章的朋友，可以添加个人微信：CS-huo
有问题可以相互探讨，共同学习！