QML深入学习七（MVC模块）

ListView

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListView{
        id:listview
        model: listmodel
        delegate: delegateid //这里也可以直接写Rectangle{}
        anchors.fill: parent
    }
    ListModel{
        id:listmodel
        ListElement{
            country:"Rwanda"
            capital:"Kigali"
        }
        ListElement{
            country:"China"
            capital:"Beijing"
        }
        ListElement{
            country:"Germany"
            capital:"Berilin"
        }
    }

    Component{
        id:delegateid
        Rectangle{
            id:rectid
            width: parent.width
            height: 50
            color:(country === "China")? "dodgerblue":"red"
            border.color: "black"
            radius: 15
            Text {
                id: textid
                text: country +": " +capital
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked: ",country)
                }
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

内联模型

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListView{
        id:listview
        model: ["January","February","March","April","May","June","July","August","September","October","November","December"]
        delegate: Rectangle{
            width: rootid.width
            height: 50
            color: "blue"
            border.color: "beige"
            radius: 5
            Text {
                id: textid
                text: modelData//这里可以拿到数据
                color: "red"
                anchors.centerIn: parent
            }
        }//delegateid //这里也可以直接写Rectangle{}
        anchors.fill: parent
    }
    ListModel{
        id:listmodel
        ListElement{
            country:"Rwanda"
            capital:"Kigali"
        }
        ListElement{
            country:"China"
            capital:"Beijing"
        }
        ListElement{
            country:"Germany"
            capital:"Berilin"
        }
    }

    Component{
        id:delegateid
        Rectangle{
            id:rectid
            width: parent.width
            height: 50
            color:(country === "China")? "dodgerblue":"red"
            border.color: "black"
            radius: 15
            Text {
                id: textid
                text: country +": " +capital
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked: ",country)
                }
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

模型追踪

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListView{
        header: headerid
        footer: Rectangle{
            width: rootid.width
            height: 50
            color: "dodgerblue"
        }
        highlight: Rectangle{ //强制显示在最上面
            z:3 //
            width: rootid.width
            height: 50
            color: "blue"
            border.color: "yellowgreen"
            radius: 15
            opacity: 0.1
        }
        id:listview
        model: ["January","February","March","April","May","June","July","August","September","October","November","December"]
        delegate: Rectangle{
            width: rootid.width
            height: 50
            color: "yellowgreen"
            border.color: "beige"
            radius: 5
            Text {
                id: textid
                text: modelData//这里可以拿到数据
                color: "red"
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("clicked:",modelData)
                    listview.currentIndex = index //设置当前索引。
                }
            }
        }//delegateid //这里也可以直接写Rectangle{}
        anchors.fill: parent


    }
    Component{
        id:headerid
        Rectangle{
            id:rectid
            width: rootid.width
            height: 50
            color: "yellowgreen"
            border{
                color: "#9EDDF2"
                width: 2
            }
            Text {
                id: textid
                anchors.centerIn: parent
                text: qsTr("Months")
                font.pixelSize: 20
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

装饰和分组

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListModel{
        id:listmodel
        ListElement{
            name:"zhangsan"
            company:"huawei"
        }
        ListElement{
            name:"lisi"
            company:"huawei"
        }
        ListElement{
            name:"wangwu"
            company:"apple"
        }
        ListElement{
            name:"zhaoliu"
            company:"apple"
        }
    }
    ListView{
        id:listviewid
        model: listmodel
        delegate: delegateid
        anchors.fill: parent
        section{
            //分组属性
            property: "company"
            criteria: ViewSection.FullString
            delegate: Rectangle{
                id:sectionid
                width: parent.width
                height: 50
                color: "yellowgreen"
                radius: 14
                Text {
                    anchors.centerIn: parent
                    id: sectiontextid
                    text: qsTr(section) //用于分组的内容,
                    font.pixelSize: 20
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("clicked: ",section)//内置的属性，
                    }
                }
            }
        }
    }
    Component{
        id:delegateid
        Rectangle{
            id:rectid
            width: parent.width
            height: 50
            color: "beige"
            border.color: "yellowgreen"
            radius: 14
            Text {
                id: textid
                text: name
                anchors.centerIn: parent
                font.pointSize: 12
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("name =",name)
                }
            }
        }

    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Repeater

批量生成项目

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Column{
        Repeater{
            model: 30
            Rectangle{
                width: 100;height: 50
                border.width: 1
                color: "yellow"
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Column{
        spacing: 20
        Repeater{
            model: ["one","two","three"]
            CheckBox{
                text: modelData
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

示例二

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Flickable{
        contentHeight: columnid.implicitHeight
        anchors.fill: parent
        Column{
            id:columnid
            anchors.fill: parent
            spacing: 2
            Repeater{
                model: 15 // ["one","two","three"]
                Rectangle{
                    width: parent.width
                    height: 50
                    color: "dodgerblue"
                    Text {
                        id: textid
                        text: modelData
                        anchors.fill: parent
                    }
                    MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("Clicked :",modelData)
                    }
                    }
                }

            }
        }

    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

动态模型

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListModel{
        id:listmodelid
        ListElement{
            firstname:"first1"
            lastname :"snow1"
        }
        ListElement{
            firstname:"first2"
            lastname :"snow2"
        }
        ListElement{
            firstname:"first3"
            lastname :"snow3"
        }

    }

    ColumnLayout{
        anchors.fill: parent
        ListView{
            id:listviewid
            model: listmodelid
            delegate: delegateid
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Button{
            text: "add item"
            Layout.fillWidth: true
            onClicked: {
                console.log("add item")
                listmodelid.append({"firstname":"add1",
                                   "lastname":"last1"}
                                   )
            }
        }
        Button{
            text: "clear item"
            Layout.fillWidth: true
            onClicked: {
                console.log("clear item")
                listmodelid.clear()
            }
        }
        Button{
            text: "delete item"
            Layout.fillWidth: true

            onClicked: {
                console.log("delete item")
                if(2< listmodelid.count)
                {
                    listmodelid.remove(0);
                }
            }
        }
        Button{
            Layout.fillWidth: true
            text: "set item"
            onClicked: {
                console.log("set item")
                listmodelid.set(0,{"firstname":"add1",
                                    "lastname":"last1"})
            }
        }
    }

    Component{
        id:delegateid
        Rectangle{
            id:rectid
            width: listviewid.width
            height: 50
            color: "beige"
            border.color: "black"
            radius: 14
            Text {
                id: textid
                text: firstname +": " +lastname
                anchors.centerIn: parent
                font.pixelSize: 20
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("clicked :",firstname)
                }
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Gridlayout

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    ListModel{
        id:gridmodelid
        ListElement{
            mNumber :1
            firstname:"first1"
            lastname :"snow1"
        }
        ListElement{
            mNumber :2
            firstname:"first2"
            lastname :"snow2"
        }
        ListElement{
            mNumber :3
            firstname:"first3"
            lastname :"snow3"
        }
        ListElement{
            mNumber :4
            firstname:"first4"
            lastname :"snow4"
        }
        ListElement{
            mNumber :5
            firstname:"first4"
            lastname :"snow4"
        }
        ListElement{
            mNumber :6
            firstname:"first4"
            lastname :"snow4"
        }
        ListElement{
            mNumber :7
            firstname:"first4"
            lastname :"snow4"
        }
        ListElement{
            mNumber :8
            firstname:"first4"
            lastname :"snow4"
        }
        ListElement{
            mNumber :9
            firstname:"first4"
            lastname :"snow4"
        }
    }
    Repeater{
        width: parent.width
        model: 20
        id:reptaterid
    }
    GridView{
        id:gridviewid
        model: gridmodelid
        anchors.fill: parent
        delegate: delegateid
        flow: GridView.FlowTopToBottom
        layoutDirection: Qt.RightToLeft
    }

    Component{
        id:delegateid

        Rectangle{
            id:rectid
            width:100
            height: 50
            color: "beige"
            border.color: "black"
            radius: 14
            Text {
                id: textid
                text: mNumber
                anchors.centerIn: parent
                font.pixelSize: 20
                wrapMode: Text.Wrap  // 开启自动换行
                anchors.margins:4 // 内边距，防止贴边框
                verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter

            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("clicked :",firstname)
                }
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

XmlListModel

以下这个添加可以有问题，请指出

qt_add_resources(cmake_qml "xml"

PREFIX /

FILES

xml/qt_blog_rss.xml

)

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    XmlListModel {
        id: xmlModel
        source: "qrc:/xml/qt_blog_rss.xml" //指定文件
        query: "/rss/channel/item" //指定标签

        XmlRole { name: "title"; query: "title/string()" } //value取文件中的值
        XmlRole { name: "pubDate"; query: "pubDate/string()"
        }
        // XmlListModelRole{} //qt5不存在！会报类型找不到
    }
    ListView {
        width: 180; height: 300
        model: xmlModel
        anchors.fill: parent
        delegate: delegateid
        // delegate: Text {
            // id: textid
            // text: qsTr(model.title +"\n")
        // }
    }
    Component{
        id:delegateid
        Rectangle{
            width: parent.width
            height: 50
            color: "beige"
            Row{
                spacing: 30
                Text {
                    id: textid1
                    text: model.title
                }
                Text {
                    text: model.pubDate +"(" +")"
                    font.bold:
                        model.pubDate === "Wed, 23 Sep 2026 08:31:01 GMT"?true:false
                    font.pixelSize: 23
                }
            }
            MouseArea{
                id:mouseareaid
                anchors.fill: parent
                onClicked: {
                    console.log("clicked + ",model.pubDate)
                }
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

PathView

视图架构模型

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Rectangle{
        width: parent.width
        height: parent.height
        color: "#EBEBEB"
        opacity: 0.9
        ListModel{
            id:modelid
            ListElement{
                out_color:"red"
            }
            ListElement{
                out_color:"green"
            }
            ListElement{
                out_color:"blue"
            }
            ListElement{
                out_color:"yellow"
            }
            ListElement{
                out_color:"black"
            }
            ListElement{
                out_color:"dodgerblue"
            }
        }
    }

    Component{
        id:delegateid
        Rectangle{
            width: 5
            height: 5
            color: "black"
            radius: 5
        }
    }
    PathView{
        anchors.fill: parent
        model: 100
        delegate: delegateid
        path: Path{
            //start
            startX: rootid.width/2
            startY: rootid.height-50
            //Q1
            PathCubic{
                x:50
                y: rootid.height/2
                control1X: rootid.width/2 - rootid.width/8
                control1Y: rootid.height
                control2X: 0
                control2Y: rootid.height/2 + rootid.height/8
            }
            //Q2
            PathCubic{
                x:rootid.width/2
                y: 50
                control1X: 0
                control1Y:  (rootid.height/2 - rootid.height/8)
                control2X: (rootid.width/2 - rootid.width/8)
                control2Y:0
            }
            //Q3
            PathCubic{
                x:rootid.width- 50
                y: rootid.height/2
                control1X: rootid.width/2 +rootid.width/8
                control1Y:  0
                control2X: rootid.width
                control2Y: rootid.height/2 - rootid.height/8
            }
            //Q4
            PathCubic{
                x:rootid.width/2
                y: rootid.height -50
                control1X: rootid.width
                control1Y:  rootid.height/2 +rootid.height/8
                control2X: rootid.width/2 + rootid.width/8
                control2Y: rootid.height
            }
        }
    }
}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Rectangle{
        width: parent.width
        height: parent.height
        color: "#EBEBEB"
        opacity: 0.9
        ListModel{
            id:modelid
            ListElement{
                out_color:"red"
            }
            ListElement{
                out_color:"green"
            }
            ListElement{
                out_color:"blue"
            }
            ListElement{
                out_color:"yellow"
            }
            ListElement{
                out_color:"black"
            }
            ListElement{
                out_color:"dodgerblue"
            }

        }
    }

    Component{
        id:delegateid
        Column{
            Rectangle{
                anchors.horizontalCenter: parent.horizontalCenter
                width: 64
                height: width
                radius: 10
                color: model.out_color
            }
            Text {
                id: textid
                text: model.out_color
                font.pixelSize: 20
            }


        }
    }
    PathView{
        anchors.fill: parent
        focus: true
        // model: 100
        model: modelid
        delegate: delegateid
        path: Path{
            //start
            startX: rootid.width/2
            startY: rootid.height-50
            //Q1
            PathCubic{
                x:50
                y: rootid.height/2
                control1X: rootid.width/2 - rootid.width/8
                control1Y: rootid.height
                control2X: 0
                control2Y: rootid.height/2 + rootid.height/8
            }
            //Q2
            PathCubic{
                x:rootid.width/2
                y: 50
                control1X: 0
                control1Y:  (rootid.height/2 - rootid.height/8)
                control2X: (rootid.width/2 - rootid.width/8)
                control2Y:0
            }
            //Q3
            PathCubic{
                x:rootid.width- 50
                y: rootid.height/2
                control1X: rootid.width/2 +rootid.width/8
                control1Y:  0
                control2X: rootid.width
                control2Y: rootid.height/2 - rootid.height/8
            }
            //Q4
            PathCubic{
                x:rootid.width/2
                y: rootid.height -50
                control1X: rootid.width
                control1Y:  rootid.height/2 +rootid.height/8
                control2X: rootid.width/2 + rootid.width/8
                control2Y: rootid.height
            }

        }
    Keys.onLeftPressed: {
        console.log("按下左键")   // 加打印！看这句会不会输出
        decrementCurrentIndex()
    }
    Keys.onRightPressed: {
        console.log("按下右键")
        incrementCurrentIndex()
    }
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Rectangle{
        width: parent.width
        height: parent.height
        color: "#EBEBEB"
        opacity: 0.9
        ListModel{
            id:modelid
            ListElement{
                out_color:"red"
            }
            ListElement{
                out_color:"green"
            }
            ListElement{
                out_color:"blue"
            }
            ListElement{
                out_color:"yellow"
            }
            ListElement{
                out_color:"black"
            }
            ListElement{
                out_color:"dodgerblue"
            }

        }
    }

    Component{
        id:delegateid

        Column{
            opacity: PathView.isCurrentItem?1:0.3
            scale: PathView.scale
            readonly property bool is_current: PathView.isCurrentItem
            Rectangle{
                anchors.horizontalCenter: parent.horizontalCenter
                width: 64
                height: width
                radius: 10
                color: model.out_color
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        if(is_current)
                        {
                            console.log("clicke ",model.out_color)
                        }
                        else
                        {
                            console.log("not cur item")
                        }
                    }
                }

            }
            Text {
                id: textid
                text: model.out_color
                font.pixelSize: 20
            }

        }
    }
    PathView{
        anchors.fill: parent
        focus: true
        // model: 100
        model: modelid
        delegate: delegateid
        path: Path{
            //start
            startX: rootid.width/2
            startY: rootid.height-50
            //路径属性
            PathAttribute{
                name:"scale"
                value: 1
            }
            //Q1
            PathCubic{
                x:50
                y: rootid.height/2
                control1X: rootid.width/2 - rootid.width/8
                control1Y: rootid.height
                control2X: 0
                control2Y: rootid.height/2 + rootid.height/8
            }
            PathAttribute{
                name:"scale"
                value: 0.5
            }
            //Q2
            PathCubic{
                x:rootid.width/2
                y: 50
                control1X: 0
                control1Y:  (rootid.height/2 - rootid.height/8)
                control2X: (rootid.width/2 - rootid.width/8)
                control2Y:0
            }
            PathAttribute{
                name:"scale"
                value: 0.2
            }
            //Q3
            PathCubic{
                x:rootid.width- 50
                y: rootid.height/2
                control1X: rootid.width/2 +rootid.width/8
                control1Y:  0
                control2X: rootid.width
                control2Y: rootid.height/2 - rootid.height/8
            }
            PathAttribute{
                name:"scale"
                value: 0.8
            }
            //Q4
            PathCubic{
                x:rootid.width/2
                y: rootid.height -50
                control1X: rootid.width
                control1Y:  rootid.height/2 +rootid.height/8
                control2X: rootid.width/2 + rootid.width/8
                control2Y: rootid.height
            }
            PathAttribute{
                name:"scale"
                value: 1
            }
        }
    Keys.onLeftPressed: {
        console.log("按下左键")   // 加打印！看这句会不会输出
        decrementCurrentIndex()
    }
    Keys.onRightPressed: {
        console.log("按下右键")
        incrementCurrentIndex()
    }
    }

}

TableView

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15
import Qt.labs.qmlmodels 1.0 //tablemodel在这里
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    TableView {
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        clip: true
        id:tableviewid

        model: TableModel {
            TableModelColumn { display: "name" }
            TableModelColumn { display: "color" }
            rows: [
                {
                    "name": "cat",
                    "color": "black"
                },
                {
                    "name": "dog",
                    "color": "brown"
                },
                {
                    "name": "bird",
                    "color": "white"
                }
            ]
        }

        delegate: Rectangle {
            implicitWidth: 100
            implicitHeight: 50
            border.width: 1

            Text {
                text: display
                anchors.centerIn: parent
            }
        }
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15
import Qt.labs.qmlmodels 1.0 //tablemodel在这里
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    HorizontalHeaderView{
        id:horizontalheaderviewid
        anchors.top: parent.top
        anchors.left: tableviewid.left
        syncView: tableviewid
        model: ["name","color"]
    }
    VerticalHeaderView{
        id:verticalheaderviewid
        anchors.top: tableviewid.top
        anchors.left: parent.left
        syncView: tableviewid
    }
    TableView {
        anchors.left: verticalheaderviewid.right
        anchors.top: horizontalheaderviewid.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        columnSpacing: 1
        rowSpacing: 1
        clip: true
        id:tableviewid

        model: TableModel {
            TableModelColumn { display: "name" }
            TableModelColumn { display: "color" }
            TableModelColumn { display: "checked" }
            TableModelColumn { display: "amount" }
            TableModelColumn { display: "test" }
            rows: [
                {
                    "name": "cat",
                    "color": "black",
                    "checked":true,
                    "amount":1
                },
                {
                    "name": "dog",
                    "color": "brown",
                    "checked":false,
                    "amount":3
                },
                {
                    "name": "bird",
                    "color": "white",
                    "checked":true,
                    "amount":1
                }
            ]
        }

        delegate:TextInput{
            text: model.display
            padding: 12
            selectByMouse: true //使用鼠标选中文本
            onAccepted: {
                model.display = text
            }
            Rectangle{
                anchors.fill: parent
                color: "#efefef"
                z:-1
            }
        }
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
import QtQuick.XmlListModel 2.15
import Qt.labs.qmlmodels 1.0 //tablemodel在这里
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    HorizontalHeaderView{
        id:horizontalheaderviewid
        anchors.top: parent.top
        anchors.left: tableviewid.left
        syncView: tableviewid
        model: ["name","color","checked","amount","text"]
    }
    VerticalHeaderView{
        id:verticalheaderviewid
        anchors.top: tableviewid.top
        anchors.left: parent.left
        syncView: tableviewid
    }
    TableModel {
        id:modelid
        TableModelColumn { display: "name" }
        TableModelColumn { display: "color" }
        TableModelColumn { display: "checked" }
        TableModelColumn { display: "amount" }
        // TableModelColumn { display: "test" }
        rows: [
            {
                "name": "cat",
                "color": "black",
                "checked":true,
                "amount":1
            },
            {
                "name": "dog",
                "color": "brown",
                "checked":false,
                "amount":3
            },
            {
                "name": "bird",
                "color": "white",
                "checked":true,
                "amount":1
            }
        ]
    }

    TableView {
        anchors.left: verticalheaderviewid.right
        anchors.top: horizontalheaderviewid.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        columnSpacing: 1
        rowSpacing: 1
        clip: true
        id:tableviewid
        delegate: DelegateChooser{
            DelegateChoice{
                column: 2
                delegate: CheckBox{
                    checked:model.checked
                    onToggled: {
                        model.display = checked
                        // model.setProperty(model.index, checked, "checked")
                    }
                }
            }
            DelegateChoice{
                column: 0
                delegate: SpinBox{
                    value: model.amount
                    onValueModified: {
                        model.display = value
                    }
                }
            }
            DelegateChoice{
                column: 1
                delegate: TextField{
                    text: model.color
                    implicitWidth: 100
                    onAccepted: {
                        model.display =  text
                    }
                }
            }
        }
        model: modelid
/*
        delegate:TextInput{
            text: model.display
            padding: 12
            selectByMouse: true //使用鼠标选中文本
            onAccepted: {
                model.display = text
            }
            Rectangle{
                anchors.fill: parent
                color: "#efefef"
                z:-1
            }
        }
        */
    }
    Button{
        text: "show the data"
        anchors.bottom: parent.bottom
        onClicked: {
            console.log( modelid.data(modelid.index(0,2),"display") )
        }
    }
}