Jun 272012
 

動作確認環境:Qt 4.8.1 / Qt Creator 2.4.1 / Windows XP

前回作成したQMLのボタンは、必要最低限の動作しかしていなかった。
今回はもう少しボタンらしい見た目にしてゆく。

QMLは以下のようになった。

ボタンコンポーネントとして汎用的に使えるよう、6-9行目でプロパティの定義をしている。
こうすることで、外部からボタンの枠線の色やラベルの文字列の設定を行える。

28行目、29行目ではMouseAreaのonEnteredイベントとonExitイベントに呼応して枠線の色を変えている。
hoveredBorderColorはプロパティとして定義された色で、デフォルトはgoldとなっている。
borderColorも同様にプロパティとして定義された色で、デフォルトはwhiteとしている。

32行目以降に2つのGradientを定義している。これらはボタンの表面のグラデーションに使うことができ、
ここでは通常時のグラデーションと、ボタンが押されたときのグラデーションを定義してある。

最後の46行目で、MouseAreaの状態によってグラデーションを切り替えている。
このようにQMLで定義したボタンは以下のような外観となる。

平常時
ホバー時
クリック時

最後に、このボタンを使用したQMLの例を示す。

このQMLアプリケーションを実行すると、以下のようになる。

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)