qml 自定义API接口

API(应用程序接口),你可以自己考虑一下你的按钮应该有些什么。下面是我考虑的结果:
//    my    ideal    minimal    API    for    a    button
Button    {
                text:    "Click    Me"
                onClicked:    {    //    do    something    }
}
我想要使用text属性来设置文本,然后实现我们自己的点击操作。我也期望这个按钮有一个比较合适的初始
化大小(例如width:240)。    为了完成我们的目标,我创建了一个Button.qml文件,并且将我们的代码拷贝
了进去。我们在根级添加一个属性导出方便使用者修改它。
我们在根级导出了文本和点击信号。通常我们命名根元素为root让引用更加方便。我们使用了QML的
alias(别名)的功能,它可以将内部嵌套的QML元素的属性导出到外面使用。有一点很重要,只有根级目
录的属性才能够被其它文件的组件访问。
//    Button.qml
import    QtQuick    2.0
Rectangle    {
                id:    root
                //    export    button    properties
                property    alias    text:    label.text
                signal    clicked
                width:    116;    height:    26
                color:    "lightsteelblue"
                border.color:    "slategrey"
                Text    {
                                id:    label
                                anchors.centerIn:    parent
                                text:    "Start"
                }
                MouseArea    {
                                anchors.fill:    parent
                                onClicked:    {
                                                root.clicked()
                                }
                }
}
使用我们新的Button元素只需要在我们的文件中简单的声明一下就可以了,之前的例子将会被简化。
                Button    {    //    our    Button    component
                                id:    button
                                x:    12;    y:    12
                                text:    "Start"
                                onClicked:    {
                                                status.text    =    "Button    clicked!"
                                }
                }
                Text    {    //    text    changes    when    button    was    clicked
                                id:    status                                x:    12;    y:    76
                                width:    116;    height:    26
                                text:    "waiting    ..."
                                horizontalAlignment:    Text.AlignHCenter
                }
现在你可以在你的用户界面代码中随意的使用Button{    ...}来作为按钮了。一个真正的按钮将更加复杂,比如
提供按键反馈或者添加一些装饰。
注意
就个人而言,可以更进一步的使用基础元素对象(Item)作为根元素。这样可以防止用户改变我们设计的
按钮的颜色,并且可以提供出更多相关控制的API(应用程序接口)。我们的目标是导出一个最小的
API(应用程序接口)。实际上我们可以将根矩形框(Rectangle)替换为一个基础元素(Item),然后将
一个矩形框(Rectangle)嵌套在这个根元素(root    item)就可以完成了。
Item    {
                id:    root
                Rectangle    {
                                anchors.fill    parent
                                color:    "lightsteelblue"
                                border.color:    "slategrey"
                }
                ...
}
使用这项技术可以很简单的创建一系列可重用的组件。