I checked the different mouseArea events in the documentation and there is no chance to execute a function while a mouseArea is being pressed once. I want to keep the transition for 5 seconds and after 5 seconds it should out back.
Here is what i'm trying
Rectangle {
id: bottomBar
x: 0
y: 431
width: 800
height: 100
visible: true
color: "#d0e8f5"
radius: 32
border.width: 0
clip: false
MouseArea {
id: mouseArea
anchors.fill: parent
}
states: State {
name: "moved"; when: mouseArea.pressed
PropertyChanges { target: bottomBar; x: 0; y: 411}
}
transitions: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; }
}
}
i want to keep bottomBar on x:0 y:411 for 5 seconds
Thanks to #iam_peter we figured out the solution. I share the solution below. I also added 2 rowlayouts on this bottomBar and wanted to have 4 images with good alignment and i did. Now i want to make this images clickable and bring the ui to another qmls.(i am using stack view for that)
property string initializePage : "MainMenu.qml"
property string lightningPage : "LightningMenu.qml"
property string timerPage : "Timer.qml"
Rectangle {
id: bottomBar
x: 0
y: 431
width: 800
height: 100
visible: true
color: "#d0e8f5"
radius: 32
border.width: 0
clip: false
MouseArea {
id: mouseArea
anchors.fill: parent
onPressed: SequentialAnimation {
PropertyAnimation {
target: bottomBar
property: "y"
to: 411
}
PropertyAnimation {
targets: [bottomRowLeft,bottomRowRight]
property: "opacity"
to: 1
}
PauseAnimation {
duration: 5000
}
PropertyAnimation {
targets: [bottomRowLeft,bottomRowRight]
property: "opacity"
to: 0
}
PropertyAnimation {
target: bottomBar
property: "y"
to: 431
}
}
}
}
RowLayout{
id: bottomRowLeft
anchors {
left: bottomBar.left
bottom: bottomBar.bottom
}
anchors.bottomMargin: 45
anchors.leftMargin: 175
spacing: 10
opacity: 0
//Home Icon
Image{
source: "/images/homeButtonIcon.png"
}
MouseArea{
id: homeClicked
Layout.fillWidth: true
onClicked: {
stackViewTool.replace(Qt.resolvedUrl("MainMenu.qml")) // not working
}
}
Image{
source:"/images/removeButtonIcon.png"
}
MouseArea{
id: removeClicked
Layout.fillWidth: true
}
}
RowLayout{
id: bottomRowRight
anchors {
left: bottomRowLeft.right
bottom: bottomBar.bottom
}
anchors.bottomMargin: 45
anchors.leftMargin: 215
spacing: 10
opacity: 0
//Home Icon
Image{
source: "/images/cancelButtonIcon.png"
}
MouseArea{
id: cancelClicked
Layout.fillWidth: true
}
Image{
source:"/images/applyButtonIcon.png"
}
MouseArea{
id: applyClicked
Layout.fillWidth: true
onClicked: {
stackViewTool.replace(lightningPage)
}
}
}
StackView {
id: stackViewTool
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: bottomBar.top
}
initialItem: initializePage
}
You want to trigger an animation on MouseArea press, then the property should change, pause and go back to the previous value?
Rectangle {
id: bottomBar
x: 0
y: 431
width: 800
height: 100
visible: true
color: "#d0e8f5"
radius: 32
border.width: 0
clip: false
MouseArea {
id: mouseArea
anchors.fill: parent
onPressed: SequentialAnimation {
PropertyAnimation {
target: bottomBar
property: "y"
to: 411
}
PauseAnimation {
duration: 5000
}
PropertyAnimation {
target: bottomBar
property: "y"
to: 431
}
}
}
}
The issue on your example is that the MouseArea isn't filling the Image you should use anchors.fill and make the MouseArea a child of the Image. Currently it is also layouted by the RowLayout which you might want but doesn't make sense if you want to make the images button-like. I came up with this solution which might be what you want. This is just a guess.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
id: root
color: "white"
width: 800
height: 600
visible: true
component SimplePage: Rectangle {
property alias name: pageText.text
width: root.width
height: 200
color: "lightgrey"
Text {
id: pageText
anchors.centerIn: parent
font.pixelSize: 40
}
}
component SimpleButton: Rectangle {
property alias letter: buttonText.text
signal clicked
color: "grey"
width: 40
height: 40
Text {
id: buttonText
anchors.centerIn: parent
font {
pixelSize: 20
bold: true
}
}
MouseArea {
anchors.fill: parent
onClicked: parent.clicked()
}
}
Component {
id: initializePage
SimplePage { name: "initialize" }
}
Component {
id: lightningPage
SimplePage { name: "lightning" }
}
Component {
id: timerPage
SimplePage { name: "timer" }
}
Rectangle {
id: bottomBar
x: 0
y: 431
width: 800
height: 100
visible: true
color: "#d0e8f5"
radius: 32
border.width: 0
clip: false
MouseArea {
id: mouseArea
anchors.fill: parent
onPressed: SequentialAnimation {
PropertyAnimation {
target: bottomBar
property: "y"
to: 411
}
PropertyAnimation {
targets: [bottomRowLeft,bottomRowRight]
property: "opacity"
to: 1
}
PauseAnimation {
duration: 5000
}
PropertyAnimation {
targets: [bottomRowLeft,bottomRowRight]
property: "opacity"
to: 0
}
PropertyAnimation {
target: bottomBar
property: "y"
to: 431
}
}
}
}
RowLayout {
id: bottomRowLeft
anchors {
left: bottomBar.left
bottom: bottomBar.bottom
}
anchors.bottomMargin: 45
anchors.leftMargin: 175
spacing: 10
opacity: 0
// Home
SimpleButton {
letter: "H"
onClicked: stackViewTool.replace(initializePage)
}
// Remove
SimpleButton {
letter: "R"
}
}
RowLayout {
id: bottomRowRight
anchors {
left: bottomRowLeft.right
bottom: bottomBar.bottom
}
anchors.bottomMargin: 45
anchors.leftMargin: 215
spacing: 10
opacity: 0
// Cancel
SimpleButton {
letter: "C"
}
// Apply
SimpleButton {
letter: "A"
onClicked: stackViewTool.replace(lightningPage)
}
}
StackView {
id: stackViewTool
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: bottomBar.top
}
initialItem: initializePage
}
}
I made the following changes to your example:
Use a Page control
Put the toolbar in the footer section
Use Frame and RowLayout for the toolbar
Refactored AppButton.qml for a clickable icon Button
Supplied mock MainPage.qml and LightningPage.qml
Supply mock SVG assets
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
StackView {
id: stackView
anchors.fill: parent
initialItem: "MainPage.qml"
}
footer: Frame {
background: Rectangle { color: "#d0e8f5" }
RowLayout {
AppButton {
icon.source: "home-32.svg"
onClicked: stackView.replace("MainPage.qml")
}
AppButton {
icon.source: "x-circle-32.svg"
}
AppButton {
icon.source: "thumbs-up-32.svg"
onClicked: stackView.replace("LightningPage.qml")
}
}
}
}
// MainPage.qml
import QtQuick
import QtQuick.Controls
Page {
Text {
anchors.centerIn: parent
text: qsTr("MainPage.qml")
}
}
// LightningPage.qml
import QtQuick
import QtQuick.Controls
Page {
Text {
anchors.centerIn: parent
text: qsTr("LightningPage.qml")
}
}
// AppButton.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Button {
Layout.preferredWidth: 64
Layout.preferredHeight: 64
background: Rectangle {
radius: 8
border.color: focused ? pressed ? "white" : "black" : "grey"
color: pressed ? "lightsteelblue" : "#ccc"
}
icon.color: pressed ? "white" : "black"
icon.width: 32
icon.height: 32
}
// home-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M11 8.5V5H6v8.5L2.5 17H5v12h8v-8h6v8h8V17h2.5L16 3.5zM26 16v12h-6v-8h-8v8H6V16H4.914L7 13.914V6h3v4.914l6-6L27.086 16z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
// thumbs-up-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.878 13.966A2.564 2.564 0 0 0 27.422 12h-4.61a12.784 12.784 0 0 1-1.447-.054 4.48 4.48 0 0 1 .078-.083c.063-.051 1.522-1.33 1.522-4.903 0-2.832-.52-4.436-1.591-4.904a2.336 2.336 0 0 0-2.283.577l-.16.148L18.93 3a9.143 9.143 0 0 1-1.608 4.53 12.855 12.855 0 0 1-3.396 3.745L10.78 16H9v-2H3v15h6v-2h2.767l3.363 2h9.664a2.807 2.807 0 0 0 2.534-1.58 2.586 2.586 0 0 0 .069-2.196 2.683 2.683 0 0 0 1.464-1.773 2.773 2.773 0 0 0-.42-2.298 2.873 2.873 0 0 0 1.303-1.938 2.754 2.754 0 0 0-.653-2.22 3.037 3.037 0 0 0 .787-3.03zM8 28H4V15h4zm20.073-11.477l-.582.364.525.442a1.889 1.889 0 0 1 .74 1.73 2.006 2.006 0 0 1-1.299 1.487l-.748.305.605.533a1.786 1.786 0 0 1 .58 1.814 1.725 1.725 0 0 1-1.342 1.261l-.776.167.485.628a1.589 1.589 0 0 1 .17 1.725A1.813 1.813 0 0 1 24.794 28h-9.389l-3.363-2H9v-9h2.32l3.255-4.96a13.852 13.852 0 0 0 3.58-3.957 10.348 10.348 0 0 0 1.764-4.833 1.222 1.222 0 0 1 1.055-.278c.298.13.99.78.99 3.988 0 3.06-1.16 4.135-1.197 4.169-.194.193-.705.706-.483 1.244.25.599 1.037.627 2.528.627h4.61a1.58 1.58 0 0 1 1.495 1.241 1.99 1.99 0 0 1-.844 2.282z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
// x-circle-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M22.864 10.843L17.207 16.5l5.657 5.657-.707.707-5.657-5.657-5.657 5.657-.707-.707 5.657-5.657-5.657-5.657.707-.707 5.657 5.657 5.657-5.657zM29.8 16.5A13.3 13.3 0 1 1 16.5 3.2a13.3 13.3 0 0 1 13.3 13.3zm-1 0a12.3 12.3 0 1 0-12.3 12.3 12.314 12.314 0 0 0 12.3-12.3z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
You can Try it Online!
Related
I have next listview component:
CustomListRadio.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import "."
Rectangle {
id: radio_content
x: 0
y: 40
width: 320
height: 158
color: "black"
property int counter: 0
property int savedIndex: 0
property int checkedIndex: 0
property variant internalModel
ButtonGroup {
id: buttonGroup
}
ListView {
id: list
x: 0
y: 0
width: 320
height: 158
model: parent.internalModel
anchors.fill: radio_content
delegate: RadioDelegate {
text: modelData
checked: index == radio_content.savedIndex
ButtonGroup.group: buttonGroup
font.pixelSize: 23
font.family: "Futura Condensed"
font.styleName: "Medium"
MouseArea {
anchors.fill: parent
onClicked: {
parent.checked = true
radio_content.checkedIndex = model.index
}
}
}
}
}
RadioDelegate.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
RadioDelegate {
id: control
text: qsTr("RadioDelegate")
checked: true
contentItem: Text {
leftPadding: control.indicator.width + control.spacing
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
indicator: Rectangle {
implicitWidth: 30
implicitHeight: 30
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 15
color: control.checked ? "#0088FF" : "white"
border.color: "#0088FF"
Rectangle {
width: 10
height: 10
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
radius: 5
color: "white"
visible: control.checked
}
}
background: Rectangle {
implicitWidth: 320
implicitHeight: 40
color: "black"
border {
color: "#383838"
width: 1
}
}
}
How add component
CustomListRadio {
id: radio_list
internalModel: msg.languageVariantList
savedIndex: msg.language
}
It creates a list of radiobuttons. It works well. But, I can't select default checked radio button. Selecting a switch with the mouse, works. But from the code, at best, my solution selects the switch only if the length of the list is equal to the number of visible elements.
Problem in RadioDelegate.qml, need to remove next string:
checked: true
I have a list view which need to be masked by an image.
Because am using a highlight component whose width need to be reduced according to the scrolling.
Is it possible with this code ? If anything wrong in this please suggest me some methods.
Item{
id: test
x: 0
y: 0
width: 1920
height: 720
ListView {
id: source_list
x: 0
y: 0
width: 600
height: 720
spacing: 40
model: mediaSongsModel
delegate: mediaSongsDelegate
focus: true
interactive: true
highlightFollowsCurrentItem: true
highlightMoveDuration: 0
highlight: highlightBar
snapMode: ListView.SnapOneItem
preferredHighlightBegin:260/scaleFactor
preferredHighlightEnd: 260/scaleFactor
highlightRangeMode : ListView.ApplyRange
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource:Item {
width: 100
height: 500
Image{
id :crop
x: 0
y: 0
width: 600
height: 720
source :"image/bg.png"
}
}
}
}
Something as you already did:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 600
height: 600
Rectangle {
id: rect
width: 400
height: 400
anchors.centerIn: parent
color: "black"
visible: (img.status == Image.Ready)
ListView {
anchors.fill: parent
model: 30
delegate: Text { text: "itemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm" + index; color: "yellow" }
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: img
}
}
Image {
id: img
source: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png"
width: 400
height: 400
anchors.centerIn: parent
visible: false
}
}
But I don't think you can mask mouse events.
I have 3 pages :
Main.qml : contains topbar.qml and menubar.qml as static and Audio.qml which is loaded dynamiacally.
In would like to animate menubar ( options buttons) but nothing is showing.
Here is the 4 files. It seems that the Z order is not working.
**Topbar.qml**
import QtQuick 2.0
Item {
id:root
width: 736
height: 55
z:100
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
Rectangle {
id: rectangle1
anchors.fill: parent
color: "black"
Text {
id: text1
color: "#ffffff"
text: qsTr("18:00")
anchors.top: parent.top
anchors.topMargin: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.left: parent.left
anchors.leftMargin: 332
anchors.right: parent.right
anchors.rightMargin: 332
font.pixelSize: 24
font.family: regular.name
}
}
}
Main.QML
import QtQuick 2.0
import QtQuick.Window 2.2
import Controllers 1.0
import "Logic.js" as Controller_Js
Window {
visible: true
id: root
width: 800
height: 480
maximumHeight: height
maximumWidth: width
minimumHeight: height
minimumWidth: width
color: "#000000"
Component.onCompleted: {
Controller_Js.setCurrentPage(Controller.homeView)
loader.source = "Home.qml"
console.log("module controllers", Controller.homeView)
}
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
FontLoader {
id: medium
source: "fonts/DINPro-Medium.otf"
}
FontLoader {
id: bold
source: "fonts/DINPro-Bold.otf"
}
TopBar {
id: topbar
x:58
y:0
width: 742
height: 55
}
MenuBar {
id: menuBar1
width: 58
height: 480
}
Item{
id: page
x: 64
y:54
width: 736
height: 426
Loader{
id: loader
x: 0
y: 0
width: 736
height: 428
asynchronous: true
}
MenuBar.qml : short example where i call my animation
Item {
id: optionsBut
x: 8
y: 164
width: 48
height: 52
Image {
id: image2
x: 3
y: 0
width: 37
source: "assets/RT-actionbar-sub-menu.png"
}
MouseArea {
id: mousesubmenu
x: -2
y: -15
width: 53
height: 67
onClicked: {
Controller.statesubmenu="ShowSubmenu"
console.log("state submenu",Controller.statesubmenu )
}
}
}
my animation component : Submenu which have 2 states ; show and hide. In debugger it tell me state : "show" but nothing appears in my screen.
Rectangle {
id: root
x: -382
y: 0
width: 318
height: 425
color: "#282827"
border.width: 0
visible: true
z: 2000
state: Controller.statesubmenu
MouseArea {
anchors.fill: paren
onClicked: mouse.accepted = false
}
Rectangle {
id: item1
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 100
height: 35
color: "#ffffff"
text: qsTr("Sources")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item2
y: 70
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 122
height: 35
color: "#ffffff"
text: qsTr("Settings")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item3
x: 0
y: 141
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("Audio Effects")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item4
x: 0
y: 212
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("My stations")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
states: [
State {
name: "ShowSubmenu"
PropertyChanges {
target: root
x: 0
}
},
State {
name: "HideSubmenu"
PropertyChanges {
target: root
x : -382
z: 100
visible: true
}
}
]
transitions: [
Transition {
NumberAnimation {
property: "x"
easing.type: Easing.InOutQuad
}
}
]
}
I found the mistake: I did not call the submenu in the loaded page that's why nothing was showing.
now it works nice. I just add :
SubMenuAudio{
id:mysub
}
Thanks
I am trying to make an app which shows 3 pages at a time. The central page shows 3 rectangles displying sql query results 1-3 , the left page is a link to an image from query result 4, and the right page is also built from the same query and has a different layout. Now I am unable to fit these 3 pages into a listmodel and use pathview to make it look like a paginator, because all 3 pages are incongruent and not really a model, hence giving me error ListElement: cannot contain nested elements. I am pasting the code below. All i want is for the user to be able to flick between the pages, whether that involves a pathview or statechange with a decent transition to mimick flipping pages :
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import "content"
Rectangle{
property ListModel mainModel
id: tripleView
visible: true
width: 800
height: 1400
PathView {
model: mainModel
delegate: mainDelegate
id: paginator
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
anchors.fill: parent
path: Path {
startX: -tripleView.width * mainModel.count / 2 + tripleView.width / 2;
startY: tripleView.height / 2
PathLine {
x: tripleView.width * mainModel.count /2 + tripleView.width / 2
y: tripleView.height * .5 }
}
}
Component {
id: mainDelegate
Rectangle {
width: tripleView.width
height: tripleView.height
}
}
ListModel {
id: regionsModel
ListElement {
name: "Stomach"
}
ListElement {
name: "Lung"
}
ListElement {
name: "Colorectal"
}
ListElement {
name: "Pancreas"
}
ListElement {
name: "Urinary Bladder"
}
}
ListModel {
id: mainModel
ListElement{
Rectangle{
id: tnmPage
width: parent.width
height: container.height
Rectangle {
id: menu
z: 2
width: parent.width ;
height: 75
Component {
id: appDelegate
Rectangle {
width: genericText.width + 10; height: parent.height
id: wrapper
color: PathView.isCurrentItem ? "yellow" : "white"
Text {
id: genericText
height: parent.height
font.pointSize: 12
verticalAlignment: Text.AlignVCenter
// anchors.topMargin: wrapper.top
color: wrapper.PathView.isCurrentItem ? "red" : "black"
text: name
}
MouseArea {
// width:parent.width; height: parent.height
anchors.fill: parent
hoverEnabled: true
onClicked: {
var List = mWindow.printi(name)
t.content = List[1]
node.content = List[2]
mets.content = List[3]
view.currentIndex = index
}
}
}
}
PathView {
id: view
width: 2500
height: parent.height
anchors.rightMargin: 18
anchors.bottomMargin: 0
anchors.leftMargin: -18
anchors.topMargin: 0
anchors.fill: parent
// anchors.bottom: parent.bottom
// anchors.top: parent.top
// preferredHighlightBegin: .1
// preferredHighlightEnd: .6
highlightRangeMode: PathView.StrictlyEnforceRange
// anchors.rightMargin: 0
// anchors.bottomMargin: 0
// anchors.leftMargin: 2
// anchors.topMargin: -71
z: 1
highlight: Component {
Rectangle {
color: "yellow"
visible: PathView.onPath
}
}
focus: true
model: regionsModel
delegate: appDelegate
path: Path {
startX: 0; startY: view.height *.5
PathLine { x: menu.width; y: view.height * .5 }
}
}
}
Flickable {
id: flick
anchors.topMargin: menu.bottom
width: parent. width
height: parent. height - menu.height
contentWidth: parent.width+200
contentHeight: container.height // this is calculated on amount of text
PinchArea {
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.height, flick.height)
pinch.minimumScale: 0.5
pinch.maximumScale: 3
property real initialWidth
property real initialHeight
x: 0
y: 0
//![0]
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
flick.interactive = false
}
onPinchUpdated: {
t.fontSize = t.size*pinch.scale
node.fontSize = node.size * pinch.scale
mets.fontSize = mets.size * pinch.scale
}
onPinchFinished: {
flick.returnToBounds()
flick.interactive = true
}
Rectangle {
id: container
MouseArea {
anchors.fill: parent
onDoubleClicked: {
t.fontSize = 12
node.fontSize = t.size
mets.fontSize = t.size
}
}
anchors.top: flick.top
width: parent.width
height: t.height + node.height + mets.height
StageBox {
id: t
anchors.top: container.top
color: "#6acbd3"
}
StageBox {
id: node
anchors.top: t.bottom
color: "#1fd77b"
}
StageBox {
id: mets
anchors.top: node.bottom
color: "blue"
}
}
}
}
}
}
I realise the code above is lengthy, but i think it will give some idea about what i am trying to achieve. The examples i have found so far have simple pages displaying images and no nesting. Thank you for your help.
Try QML type VisualItemModel http://qt-project.org/doc/qt-4.8/qml-visualitemmodel.html#details .good luck
I have managed a hack. Experimentally implemented in colored rectangles, this flickable behaves as a 3-page app starting at mid page and allowing flicking horizontally to access neighbouring pages. It works and I am sure with some tweaking it can suit similar applications as mine. Comments invited
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
Rectangle {
state: "baseState"
id: mainScreen
width: 400
height: 600
Text {
z:2
id: logTxt
height: 10
width: 20
function log(txt){
text = txt+"\n"
}
}
Flickable {
boundsBehavior: StopAtBounds
id: flick
y: 48
onContentXChanged: {
if(flick.contentX>100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="State1"
}
if(flick.contentX<-100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
mainScreen.state="State2"
logTxt.log(flick.contentX)
}
if(flick.contentX>100 && mainScreen.state=="State2" && flick.flickingHorizontally ){
mainScreen.state="baseState"
logTxt.log(flick.contentX)
flick.contentX=0
}
if(flick.contentX<-100 && mainScreen.state=="State1" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="baseState"
flick.contentX=0
logTxt.log(flick.contentX)
Timer
}
}
interactive: true
width: 400
height: 600
transformOrigin: Item.Center
flickableDirection: Flickable.HorizontalFlick
Rectangle {
width: 600
height: 600
id: container
Rectangle {
id:two
visible: false
x: 0
z:3
height: 600
width: 400
color: "grey"
}
Row{
id: testGrid
x:0
visible: true
y: 0
z: 3
width:600
height: 600
Rectangle {
id: a
anchors.top:parent.top
color:"#f6f7b1"
visible: true
z: 3
height: parent.height
width: 200
}
Rectangle {
id: b
anchors.top:parent.top
color:"#ffebeb"
visible: true
height: parent.height
width: 200
}
Rectangle {
id: c
y: -35
anchors.top:parent.top
color:"#b1d5f7"
height: parent.height
width: 200
}
}
Rectangle {
id: three
visible: false
z:2
x:0
height: parent.height
width: 400
color: "#028000"
}
}
}
states: [
State {
name: "State1"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: two
visible: true
}
PropertyChanges {
target: three
visible: false
}
},
State {
name: "State2"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: three
visible: true
}
PropertyChanges {
target: two
visible: false
}
},
State {
name: "baseState"
PropertyChanges {
target: testGrid
visible: true
}
PropertyChanges {
target: three
visible: false
}
PropertyChanges {
target: two
visible: false
}
}
]
}
I need to have drop-down that opens upwards on clicking on Menu button in QML.
I have tried to use the listview for the same, but in the implementation we are getting drop-down which opens downwards.
Any suggestions with reference to below snippet.
import QtQuick 1.1
Rectangle {
width: 800
height: 480
Rectangle {
id:comboBox
property variant items: ["Red", "Blue", "Green"]
signal comboClicked;
x: 651
y: 344
width: 141
height: 30;
z: 0
smooth:true;
Rectangle {
id:chosenItem
radius:4;
width:parent.width;
height:comboBox.height;
color: "#454b4d"
smooth:true;
Text {
anchors.top: parent.top;
anchors.margins: 8;
id:chosenItemText
x: 11
y: 5
color: "#ffffff"
text:"Menu";
anchors.topMargin: 5
anchors.left: parent.left
anchors.leftMargin: 12
font.family: "Arial"
font.pointSize: 14;
smooth:true
}
MouseArea {
width: 400
height: 30
anchors.bottomMargin: 0
anchors.fill: parent;
onClicked: {
comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
}
}
}
Rectangle {
id:dropDown
width:comboBox.width;
height:0;
clip:true;
radius:4;
anchors.top: chosenItem.bottom;
anchors.margins: 2;
color: "lightblue"
ListView {
id:listView
height:500;
model: comboBox.items
currentIndex: 0
delegate: Item{
width:comboBox.width;
height: comboBox.height;
Text {
text: modelData
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 5;
}
MouseArea {
anchors.fill: parent;
onClicked: {
comboBox.state = ""
chosenItemText.text = modelData;
listView.currentIndex = index;
}
}
}
}
}
states: State {
name: "dropDown";
PropertyChanges { target: dropDown; height:30*comboBox.items.length }
}
transitions: Transition {
NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
}
}
}
Try to change the anchors of the dropDown item:
that
anchors.top: chosenItem.bottom;
should become
anchors.bottom: chosenItem.top;