zoukankan      html  css  js  c++  java
  • QML学习笔记(五)— 做一个简单的待做事项列表

    做一个简单的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{
                     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
         400
        height: 400
        title: qsTr("Hello World")
    
        TodoList{
            Layout.fillWidth: true;
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }
    
    }
  • 相关阅读:
    Jdk1.8 HashMap源码分析
    瘦身部署应用
    Redis 创建和使用集群(yum方式安装低版本)
    Redis 创建和使用集群
    记录一下
    Oracle 开发人员权限控制
    Linux 免密登录远程服务器及执行相关命令
    Oracle 连接表空间并执行SQL文件
    MySQL 8.0.13安装教程(windows 64位) (转)
    scrapy中Selector的使用
  • 原文地址:https://www.cnblogs.com/suRimn/p/10155524.html
Copyright © 2011-2022 走看看