I'm trying to use a Pane which I add Material.elevation: 6 but in turn I want to give it a rounded edge and I can not get both together at the same time
The following is attempted but the elevation is lost.
Pane {
// ...
Material.elevation: 6
background: Rectangle {
radius: 15
}
// ...
}
The idea is that you can keep both aspects to achieve something like:
You have to overwrite based on the source code:
RoundPane.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12
Pane {
id: control
property int radius: 2
background: Rectangle {
color: control.Material.backgroundColor
radius: control.Material.elevation > 0 ? control.radius : 0
layer.enabled: control.enabled && control.Material.elevation > 0
layer.effect: ElevationEffect {
elevation: control.Material.elevation
}
}
}
IconPane.qml
import QtQuick 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
RoundPane {
id: control
property alias name: txt.text
property alias icon: image.source
Material.elevation: 6
radius: 15
RowLayout{
anchors.fill: parent
Image {
id: image
sourceSize.height: parent.height
}
Text {
id: txt;
}
}
}
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
IconPane{
name: "Stack <b>Overflow</b>"
icon: "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"
anchors.centerIn: parent
}
}
Related
I need to have a Popup that stays visible outside the bounds of the main window.
I couldn't find anything in the Qt documentation.
This is the code:
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
Button {
text: "Open"
onClicked: popup.open()
}
Popup {
id: popup
x: 100
y: 100
width: 300
height: 400
modal: true
focus: true
dim: false
contentItem: Rectangle
{
anchors.fill: parent
color: "red"
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
}
}
This is the output of this:
I want the red to go beyond the window borders.
Something like this:
I'd appreciate the help!
Note: using a Dialog is no good for me.
Popups are not proper windows, so you'd need to create a new window like Michael mentioned:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
id: mainWindow
width: 640
height: 480
visible: true
ApplicationWindow {
id: redWindow
x: mainWindow.x + mainWindow.width / 2
y: mainWindow.y + mainWindow.height / 2
width: 300
height: 400
flags: Qt.Popup | Qt.Dialog
visible: true
Rectangle {
color: "red"
anchors.fill: parent
}
}
}
There is a suggestion to make Popups proper windows here.
I'm trying to make Gauge's indicator start from 0, not from -5000. I managed to make it start from 0 to 5000. But as soon as I set any negative value, the indicator is not displayed. Help me please.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0
import QtCharts 2.3
Window {
id: winapp
visible: true
width: 1000
height: 630
color: "#1b2153"
title: qsTr("FirstProject")
Gauge {
id: gauge1
x: 20
y: 53
width: 44
height: 547
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
value: 1246
minimumValue: -5000
maximumValue: 5000
tickmarkStepSize: 500
formatValue: function(value) {
return value.toFixed(0);
}
property double minBarValue: 0
style: GaugeStyle{
valueBar: Item {
implicitWidth: 16
Rectangle {
width: parent.width
height: (gauge1.value === gauge1.minimumValue) ? 0 : parent.height / (gauge1.value - gauge1.minimumValue) * (gauge1.value - gauge1.minBarValue)
}
}
}
}
}
indicator image
I noticed that when values are negative, the calculated gauge height becomes negative. That is why no gauge is visible. Accounting for that can be achieved fairly easy like this for example:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0
import QtCharts 2.3
Window {
id: winapp
visible: true
width: 1000
height: 630
color: "#1b2153"
title: qsTr("FirstProject")
Gauge {
id: gauge1
x: 20
y: 53
width: 44
height: 547
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
value: 500
minimumValue: -5000
maximumValue: 5000
tickmarkStepSize: 500
formatValue: function(value) {
return value.toFixed(0);
}
property double minBarValue: 0
style: GaugeStyle{
valueBar: Item {
implicitWidth: 16
Rectangle {
width: parent.width
height: {
var maxSpan = Math.abs(gauge1.maximumValue) + Math.abs(gauge1.minimumValue)
var fill = Math.abs(gauge1.value)
var fillPercent = fill/maxSpan
var fillHeight = gauge1.height * fillPercent
return fillHeight - fillHeight/50
}
Component.onCompleted: {
if (gauge1.value < 0) {
y = -height
}
}
}
}
}
}
}
I would like to change myText.text from the main.qml but myText is in an another folder. How can I do that?
---main.qml---
import QtQuick 2.14
import QtQuick.Window 2.1
import QtQuick.Controls 2.12
import "qrc:/secondfolder/pagetwo.qml" as PageTwo
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
id: button
x: 63
y: 71
width: 142
height: 66
text: qsTr("Button")
MouseArea{
anchors.fill: parent
onClicked: {
PageTwo.myText.text = "hello world"
}
}
}
}
---pagetwo.qml---
Item {
Text {
id: myText
text: "default text"
}
}
When I run the code I got this error: "qrc:/secondfolder/pagetwo.qml": no such directory
You need to declare your PageTwo in main.qml and give it id, like this:
PageTwo {
id: pageTwo
}
Instend of PageTwo.myText.text = "hello world" you need to write pageTwo.myText.text = "hello world".
Then in file PageTwo.qml you have to write property alias myText: myText.
main.qml
import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
PageTwo {
id: pageTwo
}
Button {
id: button
width: 142
height: 66
text: qsTr("Button")
onClicked: {
pageTwo.myText.text = "hello world"
}
}
}
PageTwo
import QtQuick 2.14
Item {
property alias myText: myText
Text {
id: myText
text: "default text"
}
}
I'd recomend you to read this and check some qml example applications.
I am trying to access items that are in a Repeater, using JavaScript. This works as long as everything is in a single QML file. I understand that, when I split things into two files, the id of the Repeater moves out of the scope of my script.
What I don't understand is how I best solve this problem, since I cannot export the id as property.
Here is a MWE with two files:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {}
Button {
text: "Test"
onClicked: {
console.log("Clicked");
rect.itemAt(1).color = 'yellow'; # <- out of scope
}
}
}
}
File Mwe2.qml
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
As you indicate, the ids have the scope of the qml file, so if you want to access those elements you must expose it through a property, function, etc. of the top level of the qml. In this case for simplicity I will use an alias.
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
property alias repeater: rect
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {
id: mwe2
}
Button {
text: "Test"
onClicked: {
console.log("Clicked")
mwe2.repeater.itemAt(1).color = "yellow"
}
}
}
}
I'm using Qt5.9.1 . when i try to open drawer from another qml file i got error
QML Drawer: cannot find any window to open popup in
I have my drawer in drawerBottom.qml and i want to open it from tablePage.qml using a qml function call. Here is my code....
DrawerBottom.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
Item {
id: itemDrawerBottom
Settings {
id: settingBtm
property string style: "Default"
}
Drawer{
id: drawerBottom
Flickable{
width: 1338
height: 142
anchors.rightMargin: 8
anchors.leftMargin: 13
anchors.topMargin: 15
anchors.bottomMargin: 0
id: flickable
clip: true
anchors.fill: parent
contentWidth: flickable.width ;
contentHeight: flickable.height*1.2;
Grid {
id: gridBottom
anchors.rightMargin: 9
anchors.bottomMargin: 10
anchors.fill: parent
anchors.leftMargin: 21
anchors.topMargin: 10
columns: 2
spacing: 20
flow: Grid.LeftToRight
Component{
id: componentDrawer
Button{
id:tBtnBottom1
implicitWidth: 130
implicitHeight: 35
}
}
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
function draweropen(){
drawerbottom.open()
} }
and tablePage.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
Item {
id: itemtable
property Item itemDrawerBottom:DrawerBottom {}
Button {
id: button41
x: 159
y: 503
width: 20
height: 20
onClicked:{
itemDrawerBottom.draweropen()
}
}
}
and i use an application window which is in mail.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import Qt.labs.settings 1.0
ApplicationWindow {
id:mainwindow
visible: true
width:Screen.width
height: Screen.height
title: qsTr("E-eatZ")
GridLayout {
id: gridLayouttableview
x: 1048
y: 168
width: 529
height: 592
TablePage{
}
ColumnLayout {
id: columnLayout1DrawerBottom
x: -373
y: 412
width: 50
height: 348
DrawerBottom{
}
}
}
}