何かの設定値などアプリ全体で使用したい場合に値をどのように保存しておくかについてです。
今回は2種類の方法を紹介します。
他にもっといい方法あればぜひ知りたいです。
考え方として注意が必要です。
今回の方法を使うとどのQMLファイルからでも設定が利用できますが、モジュール化されたエレメントから直接使用するのはあまりよろしくないと思います。
なので、あるQMLファイルで設定を直接使用するかは臨機応変に検討してください。
/// 今回のポイント(?) ///
・方法その1 QMLエレメントとして別ファイルにまとめる
・方法その2 Jsファイルとして別ファイルにまとめる
・どっちもほぼ同じイメージで使えます
・別のJsファイルに設定値を渡したい場合はQML側から渡す必要あり
・QMLだと型を明示的にできて使いたいエレメントの属性と一致させられる
・Jsファイルは型があいまいになりがち(Jsマスターな人達には関係ないのかもだけど)
/// サンプルについて ////
「Setting.qml」と「Setting.js」に同じ内容のパラメータを用意してメインに配置した「Rectangle」に設定しています。
設定のロードとセーブの一例としてアプリの起動時と終了時にそれぞれ実行するようにサンプルを入れています。
ポイント4つ目に関連して「Param.js」で「Setting.js」をincludeして「paramInt」を更新するメソッドを用意していますが独立したインスタンスになるので連動しない例として全体のクリックでデバッグ表示されます。
<Category : Qt>
今回は2種類の方法を紹介します。
他にもっといい方法あればぜひ知りたいです。
考え方として注意が必要です。
今回の方法を使うとどのQMLファイルからでも設定が利用できますが、モジュール化されたエレメントから直接使用するのはあまりよろしくないと思います。
なので、あるQMLファイルで設定を直接使用するかは臨機応変に検討してください。
/// 今回のポイント(?) ///
・方法その1 QMLエレメントとして別ファイルにまとめる
・方法その2 Jsファイルとして別ファイルにまとめる
・どっちもほぼ同じイメージで使えます
・別のJsファイルに設定値を渡したい場合はQML側から渡す必要あり
・QMLだと型を明示的にできて使いたいエレメントの属性と一致させられる
・Jsファイルは型があいまいになりがち(Jsマスターな人達には関係ないのかもだけど)
/// サンプルについて ////
「Setting.qml」と「Setting.js」に同じ内容のパラメータを用意してメインに配置した「Rectangle」に設定しています。
設定のロードとセーブの一例としてアプリの起動時と終了時にそれぞれ実行するようにサンプルを入れています。
ポイント4つ目に関連して「Param.js」で「Setting.js」をincludeして「paramInt」を更新するメソッドを用意していますが独立したインスタンスになるので連動しない例として全体のクリックでデバッグ表示されます。
// main.qml import QtQuick 1.0 // JSの場合はステーテレスライブラリを各ファイルで読み込む import "Setting.js" as SettingJs import "Param.js" as ParamJs Rectangle { width: 360 height: 360 Setting{ // QMLはアプリのルートで定義すれば全域で使える id: _SettingQml } Rectangle{ x: _SettingQml.paramReal // 数値を設定 y: 0 width: parent.width - _SettingQml.paramInt // 整数を引く height: parent.height / 2; color: _SettingQml.paramColor // 色を設定 opacity: (_SettingQml.paramBool) ? 0.5 : 1.0 // bool値で変化させる Text { id: _qml anchors.centerIn: parent text: "Setting.qmlの設定を反映するパーツ" } } Rectangle{ id: _jsRectangle x: SettingJs.paramReal // 数値のつもりを設定 y: parent.height / 2 width: parent.width - SettingJs.paramInt // 整数のつもりで引く height: parent.height / 2; color: SettingJs.paramColor // 色のつもりを設定 opacity: (SettingJs.paramBool) ? 0.5 : 1.0 // bool値のつもりで変化させる Text { id: _jsText anchors.centerIn: parent text: "Setting.jsの設定を反映するパーツ" } } MouseArea { anchors.fill: parent onClicked: { // 別jsでincludeした場合は別空間ですよのサンプル _jsText.text += "\n counter(paramInt) = " + ParamJs.getCount() + ", width = " + _jsRectangle.width + ", SettingJs.paramInt = " + SettingJs.paramInt; } } Component.onCompleted: { // 読込み完了なので設定ロード _SettingQml.load(); SettingJs.load(); } Component.onDestruction: { // 終了なので設定保存 _SettingQml.save(); SettingJs.save(); } }
// Setting.qml import QtQuick 1.0 Item { property int paramInt: 20 // パラメータ1 property real paramReal: 20.0 // パラメータ2 property bool paramBool: true // パラメータ3 property color paramColor: "#dd0000" // パラメータ4 function load() { // DBなどから読み込むコードがあるといいですね } function save() { // DBなどへ保存するコードがあるといいですね } }
// Setting.js .pragma library var paramInt = 20; // パラメータ1 var paramReal = 20.0; // パラメータ2 var paramBool = true; // パラメータ3 var paramColor = "#0000dd"; // パラメータ4 function load() { // DBなどから読み込むコードがあるといいですね } function save() { // DBなどへ保存するコードがあるといいですね }
// Param.js .pragma library Qt.include("Setting.js"); function getCount() { paramInt += 10; return paramInt; }