やることリスト

ToDoリストアプリケーションのQML実装で、どのプラットフォームでもネイティブに見えるアプリケーションの作成方法を示しています。

カスタムスタイル	マテリアル	iOS

To Do Listは、どのプラットフォームでもネイティブに見える To Do リストアプリケーションのサンプルです。このサンプルは、QtDesignStudio と QtCreator の両方で実行および編集できます。カスタムスタイルの作成と使用方法、設定を使用してアプリケーションの外観と動作を制御する方法を示します。また、デリゲートに簡単なドラッグ＆ドロップ動作を実装する方法も紹介します。このアプリケーションは、ローカルストレージを使用してデバイス上のアイテムを保存し、XMLHttpRequest 、パブリックAPI（ランダムタスク機能）からデータを取得します。ビューはStackView コンポーネントによって制御されます。

アプリケーションスタイルの選択

アプリケーションは、ターゲットプラットフォームによって異なるスタイルをサポートしています。CustomStyle、Basic、Material、Universalが各プラットフォーム（Windows、Android、iOS、macOS）で利用可能です。WindowsスタイルはWindowsでのみ、iOSスタイルはiOSでのみ利用可能です。利用可能なスタイルのリストは、SettingsView のサブページの1つ「Style」にあります。現在使用しているスタイルは、同じ場所から変更できます。変更を適用するには再起動が必要です。この場合、アプリケーションはToolTip の情報でユーザーに通知します。

テーマの変更

ダークとライトのテーマも各スタイルでサポートされています。テーマは、SettingsView のテーマサブページから変更できます。すべてのスタイルで、ユーザーが手動でテーマを変更できるわけではありません。例えば、iOSではこのオプションは利用できません。この場合、テーマはデフォルトのシステム設定に従って変更されます。アプリの初回起動時には、システム・テーマが使用されます。

アプリ設定からアプリの動作を制御する

アプリケーションの動作とスタイルは、SettingsView から変更できます。この設定では、ユーザーが変更できます：

スタイル
テーマ
フォントサイズ
タスクの最大数
終了したタスクを自動的に削除するかどうか

タスクリストの実装

このアプリケーションには3つの異なるリストがあります：

今日のタスクリスト → 今日の日付が期限のタスク。
今週のタスクリスト → 7日以内に締め切りのタスク。
後のタスク → 上記のリストに当てはまらないタスク。

タスクは、アプリケーションの開始時にリストモデル間で分散されます。もちろん、タスクは実行時に（期限が変更されたときに）リストモデル間を移動することができる。単一のリストの定義はTasksList.qml とTasksListForm.ui.qml で行われ、インスタンスはTasksListsView.qml/TasksListsViewForm.ui.qml で作成されます。

    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
        }
    }

リストモデルへのデータ入力はTasksListsView.qml と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()

スワイプ、ドラッグ＆ドロップの動作

リスト・ビューはデリゲートとしてTasksListDelegate を使用します。このデリゲートはSwipeDelegate 、ユーザーがアイテムをスワイプしてハイライトしたり（アイテムがリストの一番上に移動する）、削除したりすることができます。また、ユーザーがタスクを完了としてマークしたり（アイテムは一番下に移動）、アイテムをドラッグ＆ドロップしてリストの特定の位置に移動したりすることもできます。これらの動作の実装はTasksListDelegate.qml で行われます。

ローカルストレージの使用

ローカルストレージはタスクアイテムをSQLiteデータベースに読み書きするために使われます。この関数と他のヘルパー関数の実装は、シングルトン・オブジェクトであるDatabase.qml で行われる。

    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
    }

パブリック API からデータを取得するための XMLHttpRequest の使用法

XMLHttpRequest 、パブリックAPIにリクエストを送信し、レスポンスデータを取得する。アプリケーションは、ランダムなタスクを返すことができるboredapiを使用します。そのタスクは、今日のタスクのリストに追加される。

    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) {
                    var object = JSON.parse(http.responseText.toString());
                    var currentDate = new Date()
                    var format = Qt.locale().dateFormat(Locale.LongFormat)
                    addTask(todayTasksModel, object.activity,
                            currentDate.toLocaleDateString(Qt.locale(), format), "","")
                } else {
                    console.log("error: " + http.status)
                }
            }
        }
        http.send();
    }

プロジェクト例 @ code.qt.io

©2024 The Qt Company Ltd. ここに含まれるドキュメントの著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。