QtQuick折腾结论之model delegate 的正确使用姿势

一句话总结:放在单独的文件中,避免单个文件大量代码。有益于团队开发

代码分离,会让人觉得很简单,不会乱糟糟。思路清晰.

1.model delegate都应该放在单独的文件中,元素内容和元素框架分离,在main文件组合!示例:

//*********main.qml:
    ListView{
        width: parent.width;
        height: parent.height * 0.2
            id:lisetview;
            model: MyModel{}
            delegate:MyView{}
    }
//*********MyModel.qml:
import QtQuick 2.7 
ListModel{

    ListElement{
            title:"一"
    }
    ListElement{
        title:"二"

    }
    ListElement{
            title:"三"
    }
}

//*********MyView.qml:
import QtQuick 2.7
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
Rectangle{

    width: parent.width;
    height: root.dpH(40);
    border.width: index%2?0:1
    border.color: Material.color(Material.Green)
    color:Material.color(Material.BlueGrey)
    Text{
        anchors.centerIn: parent;
        text:index + model.title + ","+ title+","+index%2
    }

}

2.数据访问:上文的delegete中可以直接访问ListView的id,进而访问model

lisetview.model.remove(index)
但是这种方式不知道语法自动提示,可以额外再main中声明,让其支持语法提示。
******main.qml:
    ListView{
        width: parent.width;
        height: parent.height * 0.2
        id:lisetview;
        property alias tmodel: mmodel
            model: MyModel{
                id:mmodel;
            }
            delegate:MyView{
                id:mview;
            }
    }
********MyView.qml:实现访问view和model,点击标签删除自身
Rectangle{

    width: parent.width;
    height: root.dpH(40);
    border.width: index%2?0:1
    border.color: Material.color(Material.Green)
    color:Material.color(Material.BlueGrey)
    Text{
        anchors.centerIn: parent;
        text:index + model.title + ","+ title+","+index%2;
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                    console.log( lisetview.tmodel.remove(index));

            }
        }
    }

}

实例:

*********main.qml
import QtQuick 2.7
import QtQuick.Controls 1.4 as Old
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import QtGraphicalEffects 1.0
import "code/Gobal.js"   as  Gobal
import "code"
ApplicationWindow {
    id:root
    visible: true;
    height: 480;
    width: 320;
    Component.onCompleted: {
        Gobal.hdwidth = dpH(72)
    }

    property real pixelDensity: 4.46
    property real multiplierH: root.height/480 //default multiplier, but can be changed by user
    property real multiplierW: root.width/320 //default multiplier, but can be changed by user
    function dpH(numbers) {
        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierH);
    }
    function dpW(numbers) {
        return Math.round(numbers*((pixelDensity*25.4)/160)*multiplierW);
    }
    property color  accentcol:"red"
    property color  backgroundcol:"white"
    property color  foregroundcol:"#000000"
    property color  primarycol:"blue"
    Material.accent:accentcol
    Material.background:backgroundcol
    Material.foreground:foregroundcol
    Material.primary: primarycol
    property alias roothd: hd
    header: ToolBar{
        id:hd;
        states: [
            State {
                name: "hide"
                PropertyChanges {
                    target: hd;opacity:0;height:0;width:0;
                }
                PropertyChanges {
                    target: lisetview;opacity:0;rotation:360;height:0;
                }
            }
        ]

        transitions: Transition {
            // Make the state changes smooth
            ParallelAnimation {
                NumberAnimation { duration: 500; properties: "opacity,x,contentY,height,width" }
                ColorAnimation { property: "color"; duration: 888 }
                NumberAnimation { duration: 888; properties: "rotation" }


            }
        }


        height:dpH(72)
        Text{

            text:"hello";
            anchors.centerIn: parent
            color: "white";
        }
        layer.enabled: true
        layer.effect: DropShadow {
            transparentBorder: true//绘制边框阴影
            color: "#000000";
            radius: dpH(15);
            id:drop;

            //cached: true;
            horizontalOffset: 0;
            verticalOffset: 0;
            samples: 16;
            smooth: true;


        }
    }

    StackView{
        clip: true;
        id:statck;
        anchors.fill: parent;
        initialItem:     ListView{
            // anchors.fill: parent;
            id:lisetview;
            property alias tmodel: mmodel
            model: MyModel{
                id:mmodel;
            }
            delegate:MyView{
                id:mview;
            }
        }
    }





    footer: TabBar {
        id: footertabBar
        height: dpH(70)
        TabButton {
            font.pointSize: 14
            text: qsTr("主页");
        }

        TabButton {
            font.pointSize: 14
            text: qsTr("最近聊天")
        }
        TabButton {
            font.pointSize: 14
            text: qsTr("通信录")
        }

    }
}

*******MyModel.qml
import QtQuick 2.7
import QtQuick.Controls 1.4 as Old
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0


ListModel{

    ListElement{
            title:"一";
            src:"qrc:/code/Page1.qml"
    }
    ListElement{
        title:"二";
         src:"qrc:/code/Page1.qml"

    }
    ListElement{
            title:"三";
             src:"qrc:/code/Page1.qml"
    }
}

****MyView.qml
import QtQuick 2.7
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
Rectangle{

    width: parent.width;
    height: root.dpH(40);
    border.width: index%2?0:1
    border.color: Material.color(Material.Green)
    color:Material.color(Material.BlueGrey)
    Text{
        anchors.centerIn: parent;
        text:index + model.title + ","+ title+","+index%2;

        }
    MouseArea{
        anchors.fill: parent;
        onClicked: {
                 statck.push(src);
                roothd.state ="hide";


        }
    }

}