EntryNavi : « QML(Qt)アプリケーションの配布方法(Windows編) | メイン | QML(Qt)で数値を選択するスピンボタン的なの作ってみた »

CategoryNavi : メイン -> コンピューター -> 開発 -> Qt

QML(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;
}
<Category : Qt>

検索

Google

サイドフィード

track feed 理ろぐ
人気ブログランキング - 理ろぐ
Powered by
Movable Type 3.34