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.7import QtQuick.Controls.Material 2.0import QtQuick.Controls.Universal 2.0Rectangle{    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.qmlimport QtQuick 2.7import QtQuick.Controls 1.4 as Oldimport QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtQuick.Layouts 1.1import QtQuick.Window 2.0import QtQuick.Dialogs 1.2import QtQuick.Controls.Styles 1.4import QtQuick.Controls.Material 2.0import QtQuick.Controls.Universal 2.0import QtGraphicalEffects 1.0import "code/Gobal.js"   as  Gobalimport "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.qmlimport QtQuick 2.7import QtQuick.Controls 1.4 as Oldimport QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtQuick.Layouts 1.1import QtQuick.Window 2.0ListModel{    ListElement{            title:"一";            src:"qrc:/code/Page1.qml"    }    ListElement{        title:"二";         src:"qrc:/code/Page1.qml"    }    ListElement{            title:"三";             src:"qrc:/code/Page1.qml"    }}

****MyView.qmlimport QtQuick 2.7import QtQuick.Controls.Material 2.0import QtQuick.Controls.Universal 2.0Rectangle{    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";        }    }}