Develop Reference

i use facing a issue in qml button

i was try to create a button in bottom menu but i was facing a issue if i clicked a rect mouse area then the text is changing if i clicked the changed another function is working
i need a help how solve the issue
if i clicked gain then only gain options should be visible then if i clicked back every thing should be normal and also in gain if i click 1x then how to integrated with another qml file
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 1920
height: 1080
visible: true
title: qsTr("Hello World")
Rectangle{
width: parent.width
height: parent.height*0.1
anchors.bottom: parent.bottom
color:"#D9D9D9"
Rectangle{
id:back
height:parent.height
width:parent.width/6
color: "#D9D9D9"
border.width:1.5
border.color:"#b9bab8"
anchors.left: parent.left
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
back.color="#aba9a9"
}
onExited: {
back.color="#D9D9D9"
}
onClicked: {
gain.border.width=1
speed.border.width=1
filter.border.width=1
lead.border.width=1
setting.border.width=1
gaintxt.text="Gain"
speedtxt.text="Speed"
filtertxt.text="Filter"
leadtxt.text="Lead"
settingtxt.text="Settings"
btn()
}
}
Text {
id: backtxt
text: qsTr("Back")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:gain
height:parent.height
width:parent.width/6
color: "#D9D9D9"
anchors.left: back.right
state: "gain"
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
gain.color="#aba9a9"
}
onExited: {
gain.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
speedtxt.text="1x(mm/mv)"
filtertxt.text="2x(mm/mv)"
leadtxt.text="3x(mm/mv)"
settingtxt.text="4x(mm/mv)"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
//gain.state = (gain.state == "gain" ? "back" : "gain")
}
Text {
id: gaintxt
text: qsTr("Gain")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:speed
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: gain.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
speed.color="#aba9a9"
}
onExited: {
speed.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Speed"
speedtxt.text="5"
filtertxt.text="10"
leadtxt.text="25"
settingtxt.text="50"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: speedtxt
text: qsTr("Speed")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:filter
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: speed.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
id:filtermouse
anchors.fill:parent
hoverEnabled:true
onEntered: {
filter.color="#aba9a9"
}
onExited: {
filter.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Filter"
speedtxt.text="20"
filtertxt.text="40"
leadtxt.text="100"
settingtxt.text="150"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: filtertxt
text: qsTr("Fliter")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:lead
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: filter.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
lead.color="#aba9a9"
}
onExited: {
lead.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Lead"
speedtxt.text="3"
filtertxt.text="6"
leadtxt.text="12"
settingtxt.text=""
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: leadtxt
text: qsTr("Lead")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:setting
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: lead.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
setting.color="#aba9a9"
}
onExited: {
setting.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
settingtxt.font.bold = true
settingtxt.color = "#001E60"
}
}
Text {
id: settingtxt
text: qsTr("Settings")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
}
}
}

Based on the various feedback, I did a major rewrite of the program.
MyApp.qml - the parent application that has the StackView
MainPage.qml - the main page that has the menu bar
SettingsPage.qml - a mock settings page
MainMenu.qml - contains the main menu bar
GainMenu.qml - contains the gain menu bar
SpeedMenu.qml - contains the speed menu bar
LeadMenu.qml - contains the lead menu bar
AppButton.qml - the big buttons on the menu bar
The refactor came about because I wanted to reduce complexity. The current implementations has these states:
MainPage with [Gain] [Speed] [Filter] [Lead] [Settings] menu buttons
MainPage with [Back] [1x] [2x] [3x] [4x] gain menu buttons
MainPage with [Back] [5] [10] [25] [50] speed menu buttons
MainPage with [Back] [20] [40] [100] [150] filter menu buttons
MainPage with [Back] [3] [6] [12] lead buttons
SettingsPage with [Back] button
Clicking on any of the buttons on the main menu will load either (1) a gain, speed, filter, or lead menu bar, (2) take you to the SettingsPage.
Clicking on the [Back] button will take you back to the MainPage and back to the main menu.
Click on any of the number buttons will set a property and then take you back to the MainPage and back to the main menu.
A StackView was used to navigate between MainPage.qml and SettingsPage.qml.
A Loader was used to load the various menus.
The stackView and menuBar, gain, speed, filter, and lead property's scope can be seen in multiple locations. This was necessary for the sub-page or the sub-menu to manipulate properties belonging to a parent page.
//MyApp.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
StackView {
id: stackView
anchors.fill: parent
initialItem: "MainPage.qml"
}
}
//MainPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
id: mainPage
property int gain: 0
property int speed: 0
property int filter: 0
property int lead: 0
header: Frame {
Text { text: "MainPage" }
}
Column {
anchors.centerIn: parent
spacing: 10
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "gain: " + gain + "x" }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "speed: " + speed }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "filter: " + filter }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "lead: " + lead}
}
}
footer: Loader {
id: menuBar
source: "MainMenu.qml"
}
}
//SettingsPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
header: Frame {
Text { text: "SettingsPage" }
}
footer: Flow {
AppButton {
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
//MainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Gain")
onClicked: {
menuBar.source = "GainMenu.qml"
}
}
AppButton {
text: qsTr("Speed")
onClicked: {
menuBar.source = "SpeedMenu.qml"
}
}
AppButton {
text: qsTr("Filter")
onClicked: {
menuBar.source = "FilterMenu.qml"
}
}
AppButton {
text: qsTr("Lead")
onClicked: {
menuBar.source = "LeadMenu.qml"
}
}
AppButton {
text: qsTr("Settings")
onClicked: stackView.push("SettingsPage.qml")
}
}
//GainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [1,2,3,4]
AppButton {
text: modelData + "x"
onClicked: {
gain = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//SpeedMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [5, 10, 25, 50]
AppButton {
text: modelData
onClicked: {
speed = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//FilterMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [20, 40, 100, 150]
AppButton {
text: modelData
onClicked: {
filter = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//LeadMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [3, 6, 12]
AppButton {
text: modelData
onClicked: {
lead = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//AppButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
width: 150
height: 50
background: Rectangle {
color: pressed ? "#ddd" : checked ? "black" : "#ccc"
border.color: "#aaa"
}
}
You can Try it Online!

TextField hover highlight animation QML QtQuick.Control 2.15

I have a textfield and I am trying to highlights its background when hovered. I am using a PropertyAnimation and it does not really do the animation:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
TextField {
id: txtfield
height: 40
width: 250
QtObject{
id: internal
// property var dynamicWidth: {if(txtfield.hovered){
// console.log('Damn')
// bg.border.width = 1.5
// }else{
// bg.border.width = 0
// }
// }
}
color: '#ffffff'
placeholderTextColor: "#7fffffff"
selectedTextColor: '#000000'
selectionColor: '#ffffff'
font.family: "Verdana"
font.pointSize: 10
placeholderText: qsTr('Enter full name...')
hoverEnabled: true
background: Rectangle{
id: bg
color: "#2c313c"
border.color: "#aa0000"
// border.width: internal.dynamicWidth
radius: 10
PropertyAnimation{
id: widthAnimation
target: bg // rectangle
property: 'border.width'
to: if(txtfield.hovered){
return 10
}else{
return 0
}
duration: 500
easing.type: Easing.InOutQuint
} }
}
I am new and just learning JS, thanks in advance :D

The animation won't start when the txtfiled.hovered property changes as you expect. To start the animation you should use the start() method. Solution 1:
TextField {
id: txtfield
anchors.centerIn: parent
height: 40
width: 250
QtObject{
}
color: '#ffffff'
placeholderTextColor: "#7fffffff"
selectedTextColor: '#000000'
selectionColor: '#ffffff'
font.family: "Verdana"
font.pointSize: 10
placeholderText: qsTr('Enter full name...')
MouseArea {
anchors.fill: parent
hoverEnabled: true
onHoveredChanged: {
if (containsMouse) {
widthAnimation.start();
} else {
bg.border.width = 0;
}
}
onClicked: {
txtfield.forceActiveFocus();
}
}
background: Rectangle{
id: bg
color: "#2c313c"
border.color: "#aa0000"
// border.width: internal.dynamicWidth
radius: 10
PropertyAnimation{
id: widthAnimation
target: bg // rectangle
property: 'border.width'
to: 10
duration: 500
easing.type: Easing.InOutQuint
}
}
}
Now, you may want to have an animation when the mouse leaves the TextArea. This is better to do using states and transitions:
TextField {
id: txtfield
anchors.centerIn: parent
height: 40
width: 250
QtObject{
id: internal
}
color: '#ffffff'
placeholderTextColor: "#7fffffff"
selectedTextColor: '#000000'
selectionColor: '#ffffff'
font.family: "Verdana"
font.pointSize: 10
placeholderText: qsTr('Enter full name...')
MouseArea {
anchors.fill: parent
hoverEnabled: true
onHoveredChanged: {
if (containsMouse) {
bg.state = "hovered"
} else {
bg.state = "unhovered"
}
}
onClicked: {
txtfield.forceActiveFocus();
}
}
background: Rectangle{
id: bg
color: "#2c313c"
border.color: "#aa0000"
radius: 10
states: [
State {
name: "hovered"
PropertyChanges {
target: bg
border.width: 10
}
},
State {
name: "unhovered"
PropertyChanges {
target: bg
border.width: 0
}
}
]
transitions: [
Transition {
from: "*"
to: "*"
PropertyAnimation {
property: "border.width"
duration: 300
easing.type: Easing.InOutQuint
}
}
]
}
}
More about states and transitions: https://doc.qt.io/qt-5/qml-tutorial3.html

How to get column data from QtQuickControls 1 with TableView in QML?

I am using import QtQuick.Controls 1.4 as CC. Whenever I click on first column, the output I get is undefined whereas I am able to get the data of the rest of the columns.
That first column has a delegate.
What is the way to get data from the first column which has a delegate?
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4 as CC
import QtQuick.Controls.Styles 1.4
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
CC.TableView
{
height: 400; width: 600
style: TableViewStyle
{
headerDelegate: Rectangle
{
height: 20
color: "lightsteelblue"
Text
{
width: parent.width
text: styleData.value
}
}
rowDelegate: Rectangle
{
color: "blue"
height: 30
MouseArea
{
id: ma
anchors.fill: parent
onClicked:
{
console.log(styleData.value)
}
}
}
itemDelegate: Rectangle
{
color: "blue"
height: 30
Text
{
text: styleData.value
}
MouseArea
{
id: ma1
anchors.fill: parent
onClicked:
{
console.log(styleData.value)
}
}
}
}
CC.TableViewColumn
{
role: "aaa"
title: "AAA"
width: 100
delegate: Item
{
Rectangle
{
anchors.left: parent.left
id: pic
radius: 100
height: 15; width: 15; color: "red"
}
Text
{
anchors.left: pic.right
anchors.leftMargin: 10
text: styleData.value
}
}
}
CC.TableViewColumn
{
role: "bbb"
title: "BBB"
width: 100
}
CC.TableViewColumn
{
role: "ccc"
title: "CCC"
width: 100
}
model: ListModel
{
id: mymodel
ListElement
{
aaa : "Banana1"
bbb : "Apple1"
ccc : "zzz1"
}
ListElement
{
aaa : "Banana2"
bbb : "Apple2"
ccc : "zzz2"
}
}
}
}

For the old (edited) question:
You should use styleData.row instead of styleData.value in the console log lines
For the new question:
Your column has a delegate, which overrides the item delegate of the table. Then, when the first column is clicked, it is actually the delegate of the row which calls console log.
You can fix that by changing the column delegate to:
CC.TableViewColumn
{
role: "aaa"
title: "AAA"
width: 100
delegate: Item
{
Rectangle
{
anchors.left: parent.left
id: pic
radius: 100
height: 15; width: 15; color: "red"
}
Text
{
id: text_id
anchors.left: pic.right
anchors.leftMargin: 10
text: styleData.value
}
MouseArea
{
id: ma2
anchors.fill: parent
onClicked: {
console.log(text_id.text)
}
}
}
}

headerDelegate QML tableView - text not visible

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
Window {
visible: true
width: 640
height: 480
color:"#292a38"
TableView
{
width: 580
headerDelegate: Rectangle
{
id: header1
height: 20;
color: "#343848"
}
rowDelegate: Rectangle
{
height: 30
}
TableViewColumn
{
role: "selectall"
title: ""
width: 40
delegate:
Rectangle
{
height: 120
width: 120
color: "#24253c"
}
}
TableViewColumn
{
role: "name"
title: "Name"
width: 145
delegate:
Rectangle
{
height: 120
width: 120
color: "#24253c"
RowLayout
{
spacing: 10
height: 20
width: 20
Image
{
height: 20
width: 20
}
Text
{
color: "lightgray"
text: "something"
}
}
}
}
TableViewColumn
{
role: "size"
title: "Size"
width: 100
delegate: Rectangle
{
height: 120
width: 120
color: "#24253c"
}
}
TableViewColumn
{
role: "last_updated"
title: "Last Updated"
width: 300
delegate: Component
{
Rectangle
{
height: 100
width: 150
id: head
color: "#24253c"
RowLayout
{
spacing: 10
height: parent.height
width: parent.width
Text {
id: name
text: Date().toLocaleString()
color: "lightgray"
}
Image
{
height: 20
width: 20
MouseArea
{
anchors.fill: parent
onClicked: parent.color = "grey"
}
}
}
}
}
}
model: ListModel
{
id: mymodel
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
This results in:
As you can see the titles of the header are not visible. Please help.

Header delegates are to be written inside TableViewStyle with style property and then we are supposed to use styleData.value to get the value of individual column titles in the header.
TableView
{
width: 580
style: TableViewStyle
{
headerDelegate: Rectangle
{
height: 20
color: "lightsteelblue"
Text {
width: parent.width
text: styleData.value // <---
elide: Text.ElideMiddle
}
}
itemDelegate: Rectangle
{
color: "red"
Text {
width: parent.width // <---
text: styleData.value
elide: Text.ElideMiddle
}
}
rowDelegate: Rectangle
{
color: "blue"
height: 30
}
}
TableViewColumn
{
role: "selectall"
title: "XYZ"
width: 40
}
}

QtQuick2 - custom MessageBox

Does anyone know how to implement custom MessageBox for mobile devices? I've tried to use Window type, but with no luck (it just shows but somewhere out of screen). I appreciate if someone can show me why usage of Window doesn't work. I used also this example. But on mobile devices it doesn't work.
Here is my current code, using Window. As said, it doesn't work since it does show out of screen range.
import QtQuick 2.4
import QtQuick.Window 2.1
Item{
function showMessage(text, title)
{
messageBox.text = text;
messageBox.title = title;
messageBox.visible = true;
}
Window {
id: messageBox
modality: Qt.ApplicationModal
title: ""
visible: false
property alias text: messageBoxLabel.text
color: parent.color
minimumHeight: 100
minimumWidth: 300
Label {
anchors.margins: 10
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: messageBoxButton.top
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
id: messageBoxLabel
text: ""
}
Button {
anchors.margins: 10
id: messageBoxButton
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "Ok"
onClicked: messageBox.visible = false
}
}
}
Can someone show me why it's working wrong?

MessageBox.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
Rectangle {
id: mainWrapper
color: "#80000000"
x: 0;
y: 0;
width: parent.width;
height: parent.height;
opacity: 0;
Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }
visible: opacity > 0
property string text;
MouseArea {
anchors.fill: parent;
preventStealing: true
}
signal finished(bool ok);
function init() {
opacity = 1;
msgB.scale = 1.0;
}
Rectangle {
id: msgB
color: "#323232"
gradient: Gradient {
GradientStop { position: 0; color: "#323232" }
GradientStop { position: 1; color: "#252525" }
}
//radius: 7
width: parent.width * 0.4;
height: cont.height + 20 * 2;
anchors.centerIn: parent;
scale: 0.6
Behavior on scale { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }
Behavior on height { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }
Column {
id: cont
width: parent.width;
y: 20;
spacing: 20;
Text {
color: "#ffffff"
horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
font {
bold: false;
pixelSize: 21;
}
wrapMode: Text.WordWrap;
text: mainWrapper.text;
}
Button {
anchors.margins: 10
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "OK"
onClicked: {
mainWrapper.opacity = 0;
msgB.scale = 0.6;
mainWrapper.finished(true);
}
}
}
}
}
Somewhere in main.qml file (window is the id of main.qml element):
function message(msg, finished) {
var alert = Qt.createComponent("MessageBox.qml").createObject(window, { text: msg });
alert.onFinished.connect(function(ok) {
if (ok) {
if (finished)
finished();
}
alert.destroy(500);
});
alert.init();
return alert;
}
Use it like this:
Button {
...
onClicked: {
message("Hello world", function() { console.log("OK clicked"); });
}
}

Thanks all for answers and comments, summarizing above I created element without Window type, but with contentItem property. It's very raw element, but usable like Dialog as suggested by BaCaRoZzo or Window as in Mechan example.
Here is source:
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("Hello World")
width: Screen.width
height: Screen.height
visible: true
id: win
color: brPalette.charcoal
BreezeQuickMessageBox{
id: mbox
palette: brPalette
contentItem: Rectangle{
color: "lightblue"
anchors.fill: parent
BreezeQuickButton{
id: btn
anchors {
verticalCenter: parent.verticalCenter
horizontalCenter: parent.horizontalCenter
}
palette: brPalette
gradiented: false
onClicked: {
mbox.hide()
}
}
}
}
/*
Another bunch of code
*/
BreezeQuickPalette{
id: brPalette
theme: "dark"
}
}
BreezeQuickMessageBox.qml
import QtQuick 2.4
Item {
id: root
property BreezeQuickPalette palette: BreezeQuickPalette
property bool __buttonGradiented: false
property string title: "Message Box"
property Item contentItem
anchors.fill: parent
Behavior on opacity {
NumberAnimation{
duration: 250
}
}
opacity: 0
visible: opacity > 0
z: parent.z + 100
BreezeQuickPalette{
id: __palette
theme: palette.theme
}
Rectangle {
id: window
width: parent.width
height: parent.height*0.4
anchors {
verticalCenter: parent.verticalCenter
}
z: parent.z + 1
color: palette.charcoal
Item {
id: content
width: parent.width
anchors {
top: titleText.bottom
bottom: line.top
horizontalCenter: parent.horizontalCenter
topMargin: 8
bottomMargin: 8
}
children: contentItem
}
Rectangle{
id: line
width: parent.width
anchors{
bottom: buttonArea.top
horizontalCenter: parent.horizontalCenter
}
height: 1
color: palette.focusColor
}
Text{
id: titleText
font.pointSize: buttonOk.font.pointSize
color: palette.normalText
text: title
anchors {
top: parent.top
horizontalCenter: parent.horizontalCenter
topMargin: 16
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
Rectangle{
id: buttonArea
width: parent.width
anchors{
horizontalCenter: parent.horizontalCenter
bottom: window.bottom
}
height: buttonOk.height*1.2
color: "transparent"
}
BreezeQuickButton {
id: buttonOk
caption: "Ok"
width: 128
palette: __palette
gradiented: __buttonGradiented
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: buttonArea.verticalCenter
}
onClicked: {
root.hide()
}
}
}
Rectangle{
id: shadow
anchors.fill: parent
z: parent.z
color: palette.shadeBlack
opacity: 0.4
MouseArea{
id: rootArea
anchors.fill: parent
hoverEnabled: true
}
gradient: Gradient {
GradientStop { position: 0.0; color: palette.black }
GradientStop { position: 0.1; color: palette.shadeBlack }
GradientStop { position: 0.3; color: palette.grey }
GradientStop { position: 0.7; color: palette.grey }
GradientStop { position: 0.9; color: palette.shadeBlack }
GradientStop { position: 1.0; color: palette.black }
}
}
function show (title, message) {
root.opacity = 1
}
function hide () {
root.opacity = 0
}
}
And actual look for Android: