今回は２種類の方法を紹介します。
他にもっといい方法あればぜひ知りたいです。
考え方として注意が必要です。
今回の方法を使うとどのQMLファイルからでも設定が利用できますが、モジュール化されたエレメントから直接使用するのはあまりよろしくないと思います。
なので、あるQMLファイルで設定を直接使用するかは臨機応変に検討してください。
/// 今回のポイント（？） ///
・方法その１ QMLエレメントとして別ファイルにまとめる
・方法その２ Jsファイルとして別ファイルにまとめる
・どっちもほぼ同じイメージで使えます
・別のJsファイルに設定値を渡したい場合はQML側から渡す必要あり
・QMLだと型を明示的にできて使いたいエレメントの属性と一致させられる
・Jsファイルは型があいまいになりがち（Jsマスターな人達には関係ないのかもだけど）
/// サンプルについて ////
「Setting.qml」と「Setting.js」に同じ内容のパラメータを用意してメインに配置した「Rectangle」に設定しています。
設定のロードとセーブの一例としてアプリの起動時と終了時にそれぞれ実行するようにサンプルを入れています。
ポイント４つ目に関連して「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 // パラメータ１
property real paramReal: 20.0 // パラメータ２
property bool paramBool: true // パラメータ３
property color paramColor: "#dd0000" // パラメータ４
function load() {
// DBなどから読み込むコードがあるといいですね
}
function save() {
// DBなどへ保存するコードがあるといいですね
}
}
// Setting.js
.pragma library
var paramInt = 20; // パラメータ１
var paramReal = 20.0; // パラメータ２
var paramBool = true; // パラメータ３
var paramColor = "#0000dd"; // パラメータ４
function load() {
// DBなどから読み込むコードがあるといいですね
}
function save() {
// DBなどへ保存するコードがあるといいですね
}
// Param.js
.pragma library
Qt.include("Setting.js");
function getCount() {
paramInt += 10;
return paramInt;
}
コメント