qml example: Draw text on Canvas

qml example: Draw text on Canvas

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Canvas {
        anchors.fill: parent

        onPaint: {
            var ctx = getContext('2d');
            ctx.font="50px";
            ctx.fillText("qteveloper", 50, 150);
            ctx.font="20px";
            ctx.strokeText("qteveloper.blogspot.com", 50, 200);

        }

    }
}

qml example: Draw something on Canvas

qml example: Draw something on Canvas

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Canvas {
        anchors.fill: parent

        onPaint: {
            var ctx = getContext('2d');

            ctx.fillStyle = "red"
            ctx.fillRect(150, 200, 120, 120)

            ctx.beginPath();
            ctx.lineWidth = 3
            ctx.strokeStyle = "blue"
            ctx.ellipse(10, 10, 200, 200)
            ctx.rect(50, 50, 200, 200)
            ctx.stroke();

        }

    }
}

qml example: Slider

qml example: Slider

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        id: myText
        anchors.centerIn: parent
        text: mySliderHandle.x
    }

    Rectangle {
        id: mySlider

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandle
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: "blue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }
}

qml example: PathView

Example of using qml PathView. For details of Path, read Path.

qml example: PathView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    PathView {
        id: myPathView
        anchors.fill: parent


        model: myListModel
        delegate: Component{
            Item{
                property variant itemData: model.modelData
                width: 100
                height: 12
                Column{
                    Text {
                        text: dayOfWeek;
                        anchors.horizontalCenter: parent.horizontalCenter }
                }

                //Use mouse click to select currentIndex
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myPathView.currentIndex = index

                    }
                }

            }
        }

        //To read detail of Path,
        //visit: http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-path.html
        path: Path {
            startX: 50; startY: 12
            PathLine { x: 300-50; y: 360-12 }
        }

        focus: true

        //Press Left/Right key to change currentIndex
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()

    }

}

qml example: simple GridView vs ListView

Simple GridView:

simple GridView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    GridView {
        width: parent.width; height: parent.height
        cellWidth: 100; cellHeight: 20
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}

Simple ListView:

simple ListView

import QtQuick 2.0

Rectangle {

    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    ListView {
        width: parent.width; height: parent.height
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        model: myListModel
        delegate: Column {
            Text { text: num + " : " + dayOfWeek; anchors.horizontalCenter: parent.horizontalCenter }
        }
        focus: true
    }

}

qml example: load ListView with data from ListModel

Example of qml to load ListView with data from ListModel.

qml example: load ListView with data from ListModel

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 300
    height: 360

    ListModel {
        id: myListModel
        ListElement { dayOfWeek: "Sunday"; num: 0}
        ListElement { dayOfWeek: "Monday"; num: 1}
        ListElement { dayOfWeek: "Tuesday"; num: 2}
        ListElement { dayOfWeek: "Wednesday"; num: 3}
        ListElement { dayOfWeek: "Thursday"; num: 4}
        ListElement { dayOfWeek: "Friday"; num: 5}
        ListElement { dayOfWeek: "Saturday"; num: 6}
    }

    ListView{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: myListModel

        delegate: Component{
            Item{
                width: parent.width
                height: 12
                Column{
                    Text {text: model.num + " : " + model.dayOfWeek}
                }
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index
                    }
                }
            }
        }

        onCurrentItemChanged: {
            myText.text = myListModel.get(myListView.currentIndex).dayOfWeek
        }
    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}

qml example: Detect mouse click on ListView

Last qml example of ListView response for keyboard only. It is modified in this example to handle mouse click, with MouseArea.

qml example: Detect mouse click on ListView

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 300
    height: 360

    ListView{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"]

        delegate: Component{
            Item{
                property variant itemData: model.modelData
                width: parent.width
                height: 12
                Column{
                    Text {text: model.modelData}
                }
                MouseArea{
                    id: itemMouseArea
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index

                    }
                }
            }
        }

        onCurrentItemChanged: myText.text = myListView.currentItem.itemData

    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}