qml笔记

锚点

使用锚点，可能会影响布局，类比html，就是div脱离文本流，能用columnLayout等布局组件布局的，尽量不雅用锚点对齐，锚点也会相对影响性能（删除锚点后，程序边流畅，待证实）

动态创建的组件要销毁

使用js动态创建组件，使用mouseArea触发点击事件，获取根节点，无法使用destory的方法，例如：

Rectangle {
    id: root
    anchors.fill: parent
    z: 10000
    color: '#50000003'
    property string source: ""
    property alias mouse_area: mousearea

    Image {
        anchors.fill: parent
        source: root.source
        fillMode: Image.PreserveAspectFit
    }

    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: function (){
            // 无法这样删除组件 
            root.destroy()
        }
    }
}

建议在动态创建组件时绑定删除组件的方法

function fnViewImage(parent, url)
{
    var component = Qt.createComponent("../Components/ImageViewer.qml");
    var createDialog = function()
    {
        if (component.status == Component.Ready)
        {
            var dlg = component.createObject(parent);
            dlg.source = url;
            // 点击删除
            dlg.mouse_area.clicked.connect(function(){
                dlg.destroy();
                component.destroy();
            });
        }
    };

    if (component.status == Component.Ready)
    {
        createDialog();
    }
    else
    {
        component.statusChanged.connect(createDialog);
    }
}

布局

Rectangle默认为白色，建议基本布局用Item或者Page

在ScrollView中，子组件无法用 anchor.fill: parent来铺满，建议给ScrollView的父组件设置id，然后其子组件使用 width: id.width;height: id.height的方式来实现铺满

数据获取

在ListView的Delegate中，model用于获取当前界面的数据，是object，而非js的对象

在Repeater中，可以使用modelData获取当前的数据

在ListView中，append的值必须以键值对的形式存在，而且是简单键值对

要想数据变化能映射到视图变化，必须用Model+Delegate的方式，或者eventbus