Posted at

各種QMLオブジェクトの覚え書き - Qtで作るAndroid目覚ましもどき #3-1 -

More than 1 year has passed since last update.

Qtで作るAndroid目覚ましもどきシリーズ3としてまず画面構成の話をします。

まあ、大したことはしてないです。なので大した話じゃないですがこういうQMLの話も日本語だとそんなにないので何かの気付きにつながればと。

一番はリファレンスを見ることだとは思いますが。Qtのリファレンスはサンプルの断片や図での説明とかもありますし。

私の書いたソースはこれですので、気になったらこれのqmlファイルを適当に見てください。→ SummerIce


QML Object Types


ApplicationWindow

先頭にいる子。よくわかってない。

これをなしにRectangleで画面表示もできるができることは限られるっぽい。

(QQmlApplicationEngineが使えなかったり?)


Image

画像を表示するオブジェクト。特記するプロパティは下記。


  • fillMode

    Image.Stretch などの列挙子が使って画像のリサイズなどを指定できる。

    今回使っているのはImage.PreserveAspectCropで、意味はアスペクト比を保ちつつ画像をImageオブジェクトの全体に表示する(あまった部分はクロップされる=切られる)。


Item

一番基本になるオブジェクト。なのでこの次に書くオブジェクトの作成でもこのItemオブジェクトをベースに作ることが多い。

基本のオブジェクトなので特別なプロパティもすぐには出てこないが、注意点はとりあえず一つある。implicitHeightimplicitWidthだ。


  • implicitHeight / implicitWidth

    Itemはwidthとheightのプロパティを持ちつつもそれがあまり有効に反映されない場合がある。Item自身は特に形を持たないオブジェクトだから。

    なのでItemをベースにした部品を並べていると部品が部品にめり込む時がある。

    そういうときはimplicitHeightimplicitWidthを必要なように定義しておく必要がある。

    例としてはParts_hscroll_list.qmlになります。(だったはず……)


Rectangle

図形の初歩。手を抜くときにItem代わりに使う時もある。

colorは16進数のカラーコードかSVG color name(日本語ではこれなんていうんだろう?)のほか、Qt.rgba()を使ってRGBでの指定もできる。デフォルトの色は白。表示したくないときはtransparentとかにしましょう。

色に関しては他のオブジェクトと共通……詳細はリファレンスを参照。


MouseArea

マウスやタッチの操作を受け付けるオブジェクト。ボタンを作る時はRectangleかImageと一緒にすることが多いでしょう。

……これについてはいろいろ書けそう。気が向いたら書きます。

ひとつだけここで書きたかったのはwheelイベント・wheelシグナルについて


wheel(WheelEvent wheel)

なんかスワイプみたいに指ではじいたらメニューの項目が変わる部品を作りたいなーと思った。(そう言うのってなんていうんだろう? スクロールといえばそうだけど、スクロールみたいに大きくするつもりもなかった)

とはいえQtの扱いとしては指でのスワイプもマウスでのホイールも同じ感じっぽい。

そんなわけで、まず対象のMouseArea上でホイール/スワイプされた時にはonWheelイベントが発生するので捕まえる。

そしてどういうホイールだったかを取得するにはwheelという特別なパラメータをMouseAreaのシグナルハンドラー内で使えるので使う。

wheelパラメータについてはググったらなんか英語で出てきた気がするので正確なことはそちらを参照。

とりあえず私はスワイプの方向が知りたかったので、縦方向のスワイプの取得にはwheel.angleDelta.yを、横方向のスワイプはwheel.angleDelta.xを使って取得した。それぞれ上下と左右で値の正負が変わるのでそれで向きが判断できる。

具体的な内容はParts_scroll_list.qmlとParts_hscroll_list.qmlを見てください。


Text

文字を出すオブジェクト。

文字を出すだけなら簡単だが、折り返したりなんなりするときはいろいろ設定できる、奥深い子。

背景を持つわけではないのでRectangleやImageとセットにすることが多いと思うが、それらを表示域とする場合に上下左右のマージンなどを置こうとするとanchorの使い方が難しくなる。

というわけでそのうちanchorの覚え書きを別に書き起こすかもしれない。


Row

Rowの中にあるオブジェクトを横に整列させるオブジェクト。これ自体は表示されない。

配置するだけならanchorとか使っても良いが、これを使うとマージンとかの設定が楽なので適宜使う。

兄弟にColumnがいる。


Timer

名前のとおりのタイマー。目に見えるオブジェクトでも何でもない。

普通にタイマーとして使う以外に、良いのか悪いのか知らないが、非同期で実行したいことをこのTimerのtriggeredシグナルの延長でやるという使い道もある。


  • repeat

    デフォルトはfalseでいわゆるワンショットタイマーとして動作する。

    Timer定義時にこれの初期値は省略しないのが私の流儀です。


  • running

    trueにするとタイマーが始まります。falseにすれば止まります。デフォルトはfalse。

    タイマーを開始するときにはstartメソッド、停止するときにはstopメソッドが使えますが、どうやらこのrunnningプロパティをいじったときにそれらの関数は内部的に呼ばれるっぽい。

    ところでAndroidアプリにおいてはWindowのQML上にいるTimerがrunning=trueになっていても、そのアプリが非表示になればタイマーは止まります。(表示されればまた動き出します)



とりあえずはこんなものか……毒にならない記事であることを祈る。