CalcButton.qml
import Qt 4.7 import Qt 4.7 Rectangle { /* The property button.operation, exposed ouside, is connect to the property of inner item label.text. See 'Property aliases' (http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html#property-aliases) */ property alias operation: label.text /* Toggle behavior of button, default is not toggable. The property of button 'Advanced Mode' is set true. */ property bool toggable: false /* Porperty to tracking the toggle state of button. */ property bool toggled: false /* We want the button has a signal called clicked. */ signal clicked id: button; width: 50; height: 30 /* border.color is a item among grouped property border. See 'Grouped property'(http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeintroduction.html#grouped-properties) palette gives access to the system Qt color. e.g dark, light mid and so forth. See 'QML SystemPalette Element Reference'(http://doc.qt.nokia.com/4.7-snapshot/qml-systempalette.html#mid-prop) */ border.color: palette.mid /* This property holds the corner radius used to draw a rounded rectangle. See 'Rectangle.radius' (http://doc.qt.nokia.com/4.7-snapshot/qml-rectangle.html#radius-prop) */ radius: 6 /* 1) The gradient to use to fill the rectangle. Here gradientStop1 is the start color from upper boundary, while gradientStop2 is the end color at the bottom. See 'Gradient' (http://doc.qt.nokia.com/4.7-snapshot/qml-rectangle.html#gradient-prop) 2) Qt.lighter is a global function return a color lighter than given color. See 'Global Function' (http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeglobalobject.html) */ gradient: Gradient { GradientStop { id: gradientStop1; position: 0.0; color: Qt.lighter(palette.button) } GradientStop { id: gradientStop2; position: 1.0; color: palette.button } } /* Button text is located at enter of button and use system default buttonText*/ Text { id: label; anchors.centerIn: parent; color: palette.buttonText } /* The MouseArea item enables simple mouse handling.*/ MouseArea { id: clickRegion /* Area covers entire button.*/ anchors.fill: parent /* Signal Handlers for click on MouseArea. */ onClicked: { /*???*/ doOp(operation); /* A 'clicked' signal of parent is emitted.*/ button.clicked(); /* For toggle behavior of button.*/ if (!button.toggable) return; button.toggled ? button.toggled = false : button.toggled = true } } /* Beside of default state, the button has the other action states: Pressed and Toggled. Notice they have own condition to enter the state. In these two actions states, the starting gredient changes to palette.dark to distinguish from default appearance. */ states: [ State { name: "Pressed"; when: clickRegion.pressed == true PropertyChanges { target: gradientStop1; color: palette.dark } PropertyChanges { target: gradientStop2; color: palette.button } }, State { name: "Toggled"; when: button.toggled == true PropertyChanges { target: gradientStop1; color: palette.dark } PropertyChanges { target: gradientStop2; color: palette.button } } ] }
calculator.qml
import Qt 4.7 import Qt 4.7 Rectangle { /* The property button.operation, exposed ouside, is connect to the property of inner item label.text. See 'Property aliases' (http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html#property-aliases) */ property alias operation: label.text /* Toggle behavior of button, default is not toggable. The property of button 'Advanced Mode' is set true. */ property bool toggable: false /* Porperty to tracking the toggle state of button. */ property bool toggled: false /* We want the button has a signal called clicked. */ signal clicked id: button; width: 50; height: 30 /* border.color is a item among grouped property border. See 'Grouped property'(http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeintroduction.html#grouped-properties) palette gives access to the system Qt color. e.g dark, light mid and so forth. See 'QML SystemPalette Element Reference'(http://doc.qt.nokia.com/4.7-snapshot/qml-systempalette.html#mid-prop) */ border.color: palette.mid /* This property holds the corner radius used to draw a rounded rectangle. See 'Rectangle.radius' (http://doc.qt.nokia.com/4.7-snapshot/qml-rectangle.html#radius-prop) */ radius: 6 /* 1) The gradient to use to fill the rectangle. Here gradientStop1 is the start color from upper boundary, while gradientStop2 is the end color at the bottom. See 'Gradient' (http://doc.qt.nokia.com/4.7-snapshot/qml-rectangle.html#gradient-prop) 2) Qt.lighter is a global function return a color lighter than given color. See 'Global Function' (http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeglobalobject.html) */ gradient: Gradient { GradientStop { id: gradientStop1; position: 0.0; color: Qt.lighter(palette.button) } GradientStop { id: gradientStop2; position: 1.0; color: palette.button } } /* Button text is located at enter of button and use system default buttonText*/ Text { id: label; anchors.centerIn: parent; color: palette.buttonText } /* The MouseArea item enables simple mouse handling.*/ MouseArea { id: clickRegion /* Area covers entire button.*/ anchors.fill: parent /* Signal Handlers for click on MouseArea. */ onClicked: { /*???*/ doOp(operation); /* A 'clicked' signal of parent is emitted.*/ button.clicked(); /* For toggle behavior of button.*/ if (!button.toggable) return; button.toggled ? button.toggled = false : button.toggled = true } } /* Beside of default state, the button has the other action states: Pressed and Toggled. Notice they have own condition to enter the state. In these two actions states, the starting gredient changes to palette.dark to distinguish from default appearance. */ states: [ State { name: "Pressed"; when: clickRegion.pressed == true PropertyChanges { target: gradientStop1; color: palette.dark } PropertyChanges { target: gradientStop2; color: palette.button } }, State { name: "Toggled"; when: button.toggled == true PropertyChanges { target: gradientStop1; color: palette.dark } PropertyChanges { target: gradientStop2; color: palette.button } } ] }
No comments:
Post a Comment