To-Do-Liste

„To-Do-Liste“ demonstriert eine Beispiel-To-Do-Listen-Anwendung, die auf jeder Plattform wie eine native Anwendung aussieht. Das Beispiel kann sowohl unter Qt Design Studio als auch unter Qt Creator ausgeführt und bearbeitet werden. Es zeigt, wie man einen benutzerdefinierten Stil erstellt und verwendet und wie man mithilfe von Einstellungen das Erscheinungsbild und das Verhalten der Anwendung steuert. Außerdem wird gezeigt, wie man einfaches Drag-and-Drop-Verhalten für Delegaten implementiert. Die Anwendung nutzt den lokalen Speicher, um Elemente auf dem Gerät zu speichern, und XMLHttpRequest, um Daten aus der öffentlichen API abzurufen (Funktion „Random Tasks“). Die Ansichten werden von einer „ StackView “-Komponente gesteuert.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator: Tutorial: Erstellen und Ausführen“.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter „Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen“.

Auswahl des Anwendungsstils

Die Anwendung unterstützt je nach Zielplattform verschiedene Stile. Auf jeder Plattform (Windows, Android, iOS, macOS) stehen „CustomStyle“, „Basic“, „Material“ und „Universal“ zur Verfügung. Der Windows-Stil ist nur unter Windows verfügbar, der iOS-Stil nur unter iOS. Die Liste der verfügbaren Stile befindet sich auf einer der Unterseiten des „ SettingsView “ mit dem Namen „Style“. Der aktuell verwendete Stil kann an derselben Stelle geändert werden. Um die Änderungen zu übernehmen, ist ein Neustart erforderlich. Die Anwendung informiert den Benutzer darüber mit der Meldung „ ToolTip “.

Design ändern

In jedem Stil werden auch dunkle und helle Designs unterstützt. Das Design kann auf der Unterseite „Design“ der „ SettingsView “ geändert werden. Nicht bei jedem Stil kann der Benutzer das Design manuell ändern; unter iOS ist diese Option beispielsweise nicht verfügbar. In diesem Fall richtet sich das Design nach den Standard-Systemeinstellungen. Beim ersten Start der App wird das Systemdesign verwendet.

Steuerung des App-Verhaltens über die App-Einstellungen

Das Verhalten und der Stil der Anwendung können unter SettingsView geändert werden. Über die Einstellungen kann der Benutzer Folgendes ändern:

• Stil
• Design
• Schriftgröße
• maximale Anzahl an Aufgaben
• ob erledigte Aufgaben automatisch entfernt werden sollen

Implementierung der Aufgabenliste

Die Anwendung verfügt über drei verschiedene Listen:

• Aufgabenliste „Heute“ → Die Aufgaben, deren Fälligkeitsdatum auf heute fällt.
• Aufgabenliste „Diese Woche“ → Die Aufgaben, die in den nächsten sieben Tagen fällig sind.
• Spätere Aufgaben → Die Aufgaben, die nicht in die oben genannten Listen passen.

Die Aufgaben werden beim Start der Anwendung auf die Listenmodelle verteilt. Selbstverständlich können die Aufgaben zur Laufzeit zwischen den Listenmodellen wechseln (wenn sich ihr Fälligkeitsdatum ändert). Die Definition der einzelnen Listen erfolgt in „ TasksList.qml “ und „ TasksListForm.ui.qml “, die Instanzen werden in „ TasksListsView.qml/TasksListsViewForm.ui.qml “ erstellt.

    ListModel {
        id: todayTasksListModel
    }

    ListModel {
        id: thisWeekTasksListModel
    }

    ListModel {
        id: laterTasksListModel
    }

    Column {
        id: column

        anchors.fill: parent
        spacing: 14

        TasksList {
            id: todayTasks

            width: column.width
            maxHeight: 180
            listModel: todayTasksListModel
            headerText: qsTr("Today")
            tasksCount: todayTasksListModel.count
        }

        TasksList {
            id: thisWeekTasks

            width: column.width
            maxHeight: column.height - y - 60
            listModel: thisWeekTasksListModel
            headerText: qsTr("This week")
            tasksCount: thisWeekTasksListModel.count
        }

        TasksList {
            id: laterTasks

            width: column.width
            maxHeight: column.height - y
            listModel: laterTasksListModel
            headerText: qsTr("Later")
            tasksCount: laterTasksListModel.count
        }
    }

Das Befüllen des Listenmodells mit Daten erfolgt unter TasksListsView.qml und Component.onCompleted.

    function createTasksLists() : void {
        var tasks = Database.getTasks()
        var currentDate = new Date()
        var format = Qt.locale().dateFormat(Locale.LongFormat)
        var dateStr = currentDate.toLocaleDateString(Qt.locale(),format)
        tasks.forEach( function(task){
            if (task.date === dateStr) {
                todayTasksModel.append(task)
            } else if (checkThisWeekDate(task.date)) {
                thisWeekTasksModel.append(task)
            } else {
                laterTasksModel.append(task)
            }
        })
    }

    Component.onCompleted: createTasksLists()

Verhalten beim Wischen, Ziehen und Ablegen

Die Listenansicht verwendet „ TasksListDelegate “ als Delegaten. Der Delegat ist ein „ SwipeDelegate “; er ermöglicht es dem Benutzer, durch Wischen ein Element zu markieren (das Element wird an den Anfang der Liste verschoben) oder es zu entfernen. Außerdem kann der Benutzer die Aufgabe als erledigt markieren (das Element wird an das Ende der Liste verschoben) oder das Element per Drag & Drop an eine bestimmte Position in der Liste verschieben. Die Implementierung dieser Funktionen erfolgt in „ TasksListDelegate.qml “.

Nutzung des lokalen Speichers

Der lokale Speicher wird zum Lesen und Schreiben der Aufgabenelemente in SQLite-Datenbanken verwendet. Die Implementierung dieser und anderer Hilfsfunktionen erfolgt in Database.qml, bei dem es sich um ein Singleton-Objekt handelt.

    property var _db

    function _database() {
        if (_db) return _db

        try {
            let db = LocalStorage.openDatabaseSync("ToDoList", "1.0", "ToDoList app database")

            db.transaction(function (tx) {
                tx.executeSql(`CREATE TABLE IF NOT EXISTS tasks (
                              task_id INTEGER PRIMARY KEY AUTOINCREMENT,
                              task_name,
                              task_dueDate TEXT,
                              task_dueTime TEXT,
                              task_notes TEXT,
                              done INTEGER,
                              highlighted INTEGER
                              )`);
            })

            _db = db
        } catch (error) {
            console.log("Error opening databse: " + error)
        };
        return _db
    }

    function addTask(taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted) {
        let results
        root._database().transaction(function(tx){
            tx.executeSql(`INSERT INTO tasks (task_name, task_dueDate, task_dueTime,
                          task_notes, done, highlighted) VALUES(?,?,?,?,?,?);`,
                        [taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted])
            results = tx.executeSql("SELECT * FROM tasks ORDER BY task_id DESC LIMIT 1")
        })
        return results.rows.item(0).task_id
    }

Verwendung von XMLHttpRequest zum Abrufen von Daten aus einer öffentlichen API

XMLHttpRequest wird verwendet, um Anfragen an eine öffentliche API zu senden und die Antwortdaten abzurufen. Die Anwendung nutzt „boredapi“, das eine zufällige Aufgabe zurückgeben kann. Die Aufgabe wird dann zur Liste der heutigen Aufgaben hinzugefügt.

    function sendHttpRequest() : void {
        var http = new XMLHttpRequest()
        var url = "https://www.boredapi.com/api/activity";
        http.open("GET", url, true);

        http.setRequestHeader("Content-type", "application/json");
        http.setRequestHeader("Connection", "close");

        http.onreadystatechange = function() {
            if (http.readyState == 4) {
                if (http.status == 200) {
                    let object = JSON.parse(http.responseText.toString());
                    let currentDate = new Date()
                    let format = Qt.locale().dateFormat(Locale.LongFormat)
                    addTask(todayTasksModel, object.activity,
                            currentDate.toLocaleDateString(Qt.locale(), format), "","")
                } else {
                    console.log("Failed to fetch a random TODO item; the API provider might be down")
                }
            }
        }
        http.send();
    }

Quelldateien

Beispielprojekt auf code.qt.io