做一個簡單的QML待做事項列表，能夠動態添加和刪除和編輯數據

GitHub:八至

作者：狐貍家的魚

本文鏈接：QML學習筆記（五）— 做一個待做事項列表

主要用到QML:ListView

效果

全部代碼

TodoList.qml

/*
  date:20181221
  author:狐貍家的魚
*/
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ColumnLayout{
    Frame{
        Layout.fillWidth: 
 
true

        ListView{
            implicitWidth: 250
            implicitHeight: 250
            clip: true

            model: ListModel{
                id:model
                ListElement{
                    done:true
                    description:"water the flowers"
                }
                ListElement{
                    done:
 
false
                    description:"Do yoga"
                }
                ListElement{
                    done:false
                    description:"Blogging"
                }
            }

            delegate: RowLayout{
                width: parent.width
                Text{
                    text: 
 
"Step" + "" + (index+1);
                }

                CheckBox{
                    checked: model.done
                    onClicked: {
                        model.done = checked
                    }
                }
                TextField{
                    text: model.description
                    onEditingFinished: model.description = text
                    Layout.fillWidth: true

                }
//                TextEdit{
//                    text: model.description
//                    onEditingFinished: model.description = text
//                    Layout.fillWidth: true
//                }
//                TextInput{
//                    text: model.description
//                    onEditingFinished: model.description = text
//                    Layout.fillWidth: true
//                }

            }
        }

    }
    RowLayout{
        Button{
            Layout.fillWidth: true
            text: ‘AddItem‘
            onClicked: model.append({done:false,description:""})
        }
        Button{
            Layout.fillWidth: true
            text: ‘DeleteItem‘
            onClicked: model.remove(ListView.currentIndex)
        }
    }
}

main.qml

/*
  date:20181221
  author:狐貍家的魚
*/
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    TodoList{
        Layout.fillWidth: true;
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }

}

QML學習筆記（五）— 做一個簡單的待做事項列表