QML(Qt)でチェックボックスを作る

クリックするとOn/Offがトグルするコンポーネントを作ります。

とっても簡単です。
ちょっと慣れればこんなテンプレ記事なくてもすぐ作れます。
公式にトグルスイッチとして似た感じのサンプルもあったりしますがパクってないですよｗ答え合わせはしましたが。UI Components: Slide Switch Example

/// 今回のポイント ///
・全体をMouseAreaにした

今回は、On/Offするマークの部分も文字の分もどこをクリックされても反応する方が使いやすいので全体をMouseAreaにしました。
他の上に乗っているテキストなどにはMouseAreaを配置しないので全てここで拾えます。
システムによってはチェックボックスはチェックマーク的な所しか反応しないものがあるのですが使いにくいのでこの様な設計にしました。
また、サイズを内容物のサイズから計算しています。
横は単純に合計。横はテキストとチェックマーク的な部分のどちらか高い方を選んでます。

今回のサンプルの見た目だとチェックボックスっぽくないと思いますが、コレを複数配置して排他制御するとラジオボタンになります。
また、画像を使ったりいろいろ表現は変更できると思います。

/// スクリーンショット ///
サンプルコードを実行した時のものです。
　

/// サンプルコード ///
まず呼び出し側のサンプル

// main.qml
import QtQuick 1.0
import "Components"

Rectangle {
    width: 360
    height: 360

    Column{
        anchors.fill: parent
        anchors.margins: 5
        spacing: 5

        // サンプル1
        CheckBox {
            text: "CheckBox1"
            checked: true

            // 変更イベント
            onCheckedChanged: {
                console.debug(text + ":" + checked);
            }
        }

        // サンプル2
        CheckBox {
            text: "CheckBox2"
            color: "#dd0055"
            checked: false

            // 変更イベント
            onCheckedChanged: {
                console.debug(text + ":" + checked);
            }
        }

    }

}

実際のチェックボックスのサンプル

// Compornents/CheckBox.qml

import QtQuick 1.0

MouseArea {
    id: _root
    width: _checkBase.width + _text.width + _text.anchors.leftMargin * 2
    height: (_checkBase.height > _text.height) ? _checkBase.height : _text.height

    property bool checked: false                        // チェック状態
    property alias text: _text.text                     // 表示するメッセージ
    property alias color: _text.color                   // 色
    property alias fontPointSize: _text.font.pointSize  // フォントサイズ
    property int checkSize: 20                          // チェックのサイズ

//これは使わずstate の whenを使う方がスマートかも
    // 状態が変わった時のイベント
//    onCheckedChanged: {
//       if(checked){
//            state = "On";
//        }else{
//            state = "";
//        }
//    }

    // クリックイベント
    onClicked: {
        checked = !checked;
    }

    // チェック自体のサイズ変更
    onCheckSizeChanged: {
        if(checkSize < 10){
            checkSize = 10;
        }
    }

    // チェックマーク
    Rectangle {
        id: _checkBase
        width: checkSize
        height: checkSize
        radius: 5
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter

        // ベースのグラデ
        gradient: Gradient {
            GradientStop {
                id: _grad1
                position: 0
                color: "#555555"
            }
            GradientStop {
                id: _grad2
                position: 1
                color: "#333333"
            }
        }

        // On/Offするところ
        Rectangle {
            id: _check
            width: checkSize - 4
            height: checkSize - 4
            radius: 5
            anchors.centerIn: parent
            // グラデ（OFF時の色）
            gradient: Gradient {
                GradientStop {
                    id: _checkGrad1
                    position: 0
                    color: "#000000"
                }
                GradientStop {
                    id: _checkGrad2
                    position: 1
                    color: "#555555"
                }
            }
        }

    }

    // テキスト
    Text {
        id: _text
        anchors.left: _checkBase.right
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter

        text: "text"
    }


    // 状態管理
    states: [
        State {
            name: "On"
            when: checked      // こっちの方がスマートかも
            PropertyChanges {
                target: _checkGrad1
                color: "#B5E61D"
            }
            PropertyChanges {
                target: _checkGrad2
                color: "#637E0E"
            }
        }
    ]
}

無意味なことをしてたのでこっそり修正

理ろぐ

QML(Qt)でチェックボックスを作る

コメント