I am trying to place a button above a drawer, like in Windows Calculator:
but it doesn't work.
Any solutions for this?
UPD: I've updated this post and added an example gif that shows what I'm trying to achieve.
ToolButton {
id: drawerButton
width: 32
height: 32
// trying to place above this object
z: 100
anchors {
left: drawerPopUp.left
leftMargin: 5
top: drawerPopUp.top
topMargin: 5
}
}
Drawer {
id: drawerPopUp
// trying to place below this object
z: -1
width: root.width * 0.35
height: root.height
edge: Qt.LeftEdge
interactive: true
}
From the Qt documentation you can read that the Drawer automatically reparents itself to Overlay, which is above all the other elements. Therefore you would need to add a button to the overlay itself as well.
import QtQuick.Controls 2.4
ApplicationWindow {
...
ToolButton {
...
parent: Overlay.overlay
...
}
}
This might get awkward if you are doing more complex stuff, so you might have to copy the button, one in the normal way and one on the overlay
Related
I need to create components dynamically add added to an area of the screen that, of course, needs to be scrollable. I found out that no matter how many of components I added with the scroll bar as its parent, the scroll bars would not appear and the element would not be scrollable.
I did a little fiddling and I think I came up with a minum working example of what I am talking about:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ScrollView {
width: 200
height: 200
clip: true
Label {
text: "ABC"
font.pixelSize: 224
}
// Rectangle {
// color: "#ff0000"
// width: 100
// height: 100
// }
}
}
This is a modified version of the example used int he official documentation. However when I uncomment the square the screen is no longer scrollable (scroll bars never appear).
If I remove the label and leave the rectangle (making it larger so that there is something to scroll to) it still doesn't work.
I am using Qt 5.10.
So the code below worked for me. I defined a rectangle as a backgroud to get border lines to a scrollable table that I need to create.
Rectangle {
id: tableBackground
color: "#ffffff"
border.width: 2
border.color: "#EDEDEE"
radius: 4
anchors.top: tableHeader.bottom
anchors.left: tableHeader.left
width: vmTableWidth
height: vmTableHeight - tableHeader.height
ScrollView {
id: tableArea
anchors.fill: parent
clip: true
ListView {
id: patientListView
anchors.fill: parent
model: patientList
delegate: VMPatientEntry {
onFetchReport: {
// This is a signal emitted by my VMPatientEntry.
}
}
onCurrentIndexChanged: {
// Do stuff when the current index changes.
}
}
}
}
So I hope this answer allows someone to fix their problem as well.
Anybody know how I can change the color of the control "RoundButton", present in the present in Qt Controls since 2.1.
I tried changing the background, but if I put "Rectangle" at the item the RoundButton became rectangular and I don't know what to put instead.
RoundButton {
id: roundButton
x: 243
y: 244
width: 20
height: 20
text: "ah"
wheelEnabled: false
background: Rectangle {
color: "yellow"
height: 50
width: 50
}
}
With Qt 5.10 you can use the palette property to avoid having to override the background:
import QtQuick 2.9
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true
RoundButton {
id: button
text: "ah"
palette.button: "salmon"
}
}
Not all styles currently respect the palette property though: the Default and Fusion styles do, and the Imagine style does, where it can (mostly text colours, as it's an image-based style).
If you're curious which palette role to use for a particular style, it's probably easiest to look to the source code:
http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/Button.qml#n77
Although the list of roles is documented:
https://doc.qt.io/qt-5.10/qml-palette.html#qtquickcontrols2-palette
You should use radius
The roundButton is just a Button (as stated here)
with radius property set to 360
so in your example it will be:
RoundButton {
id: roundButton
x: 243
y: 244
width: 20
height: 20
text: "ah"
wheelEnabled: false
background: Rectangle {
color: "yellow"
implicitHeight: 50
implicitWidth: 50
radius: 360
}
}
Note that it basically useless to do this as you could just use a Button and set the radius to 360 and it will be the same...
I'm running into some strange QML behavior. Basically, I have a TabBar header with several tabs running across it. I'd like the background element to be mostly the same for each of them, but some of them I want to be able to dynamically change the color of. So I have a component:
Component {
id: standardBackground
Rectangle {
opacity: parent.parent.checked ? 0 : (parent.parent.pressed ? 0.8 : 1)
color: tabColor
}
}
And for each TabButton, I'm doing:
TabButton {
text: qsTr("Tab 1")
background: Loader { sourceComponent: standardBackground }
height: 60
}
This works perfectly, but I'm running into some really strange errors. First off, running it this way gives me the following QML warning:
QML TabButton: Binding loop detected for property "implicitWidth"
So I figured I could fix this by adding: width: parent.width to the Rectangle in my component. This does silence the warning, but for some reason, it makes it so that the first tab will always be transparent regardless of whether or not it's clicked. This only affects the first tab. I have no clue why this would happen.
However, when I set width: <anything>, then this fixes both problems: No warnings and correct transparency. Playing around with different settings for the width causes no noticeable changes, as long as it's positive. So I have it set to 1. If I set it to 0, I get the same "implicit width" warnings.
So a couple different questions:
Why does the transparency of the component break when I set width: parent.width?
Why can I set width to any constant value without it affecting the GUI at all?
Is there a better way of silencing the warning about implicit width?
Here is my full code (simplified to less tabs):
import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import Qt.labs.settings 1.0
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Settings 2.1
import "DataEntry"
ApplicationWindow {
id: window
width: 1280
height: 1024
visible: true
title: "Hello World"
property var tabColor: "#353637"
property var dummy: InputContext.focus
Settings {
id: settings
property string style: "Universal"
}
Component {
id: standardBackground
Rectangle {
opacity: parent.parent.checked ? 0 : (parent.parent.pressed ? 0.8 : 1)
color: tabColor
width: 1
}
}
header: TabBar {
id: bar
width: parent.width
height: 60
TabButton {
text: qsTr("Tab 1")
background: Loader { sourceComponent: standardBackground }
height: 60
}
TabButton {
text: qsTr("Tab 2")
background: Loader {
sourceComponent: standardBackground
function getTabColor(error){
if (error)
return '#cccc00'
return window.tabColor
}
property var tabColor: getTabColor(hasError)
}
height: 60
}
}
StackLayout {
id: viewStack
width: parent.width
anchors.fill: parent
currentIndex: bar.currentIndex
tab1 {
}
tab2 {
}
}
}
As we are on SO I tend to answer only one question. For you, I choos the question for the binding loop.
The reason for that binding loop is documented here.
You do not specify a size for the Loader so the implicit width of the Loader is set to the width specified by the loaded Item. Here you set the size to be the same as the Loader's size. Now this would not be a problem, and the result would just be 0
Now we stir in the Button which also has an implicitSize set to its styling items. Here the Loader is instantiated widht width 0 and then resized to fill the implicitWidth of the Button which is (without a sized background) depending on the text and the paddings.
And now we update the round. So, the implicitWidth of the Rectangle is depending on the width of the Loader whose implicitWidth is depending on the Rectangles width. Further the Loaders width is depending on the Buttons width, which is depending on its implicitWidth and which is in turn depending on its childrenRect.width...
A binding loop is easily detected even if there are no direct problems, as the system is stabilizing in the first iteration.
I am using Qt 5.1 – QML desktop components. For TabView, I want to have my tabs aligned right but the tabbar should start after a button at top-right corner. I am able to align tabs right using:
tabsAlignment: Qt.AlignRight
However, I am not able to place a button at right corner. Tried this but didn’t work.:
padding.right: 60
I saw that in TabViewStyle, we have rightCorner which is set to null. I tried to put in it rectangle or my own custiom button but it didn’t appear:
rightCorner:
Rectangle{
width: 60
height: 60
color: "red"
}
Please help on using rightCorner or solving this problem. Thanks!
After reading through the source code of QtQuick controls, it seems like the corners need to have an implicitWidth as well as an implicitHeight. It does not work with components that only have width and height.
TabView {
anchors.fill: parent
style: TabViewStyle {
rightCorner: Rectangle {
color: "red"
implicitWidth: 20
implicitHeight: 20
}
}
Tab { title: "Tabby" }
Tab { title: "Tabby" }
Tab { title: "Tabby" }
}
I'm having the same problem. All I noticed is that not all components work. A Text{} or an Item{} component work fine, but as you mentioned, a Rectangle{} component can't be added outright, you'd have to wrap it in an Item, like so:
rightCorner: Item{
Rectangle{
width: 60
height: 60
color: "red"
}
}
I'm designing the Spinner control (or You can Scollable list of items). Its working fine as far as the functionality is concerned
The main issue is the i want to create a circular motion feel in scrolling the items. So to give that effect in the scrolling list we decided to have preceding & trailing item size comparatively small than current item
I'm really struggling to get the different size of the items. Can any one suggest me how to proceed with the same.
Below is my code snippet
ContentModel.qml
import QtQuick 1.1
Rectangle {
property alias model: view.model
property alias delegate: view.delegate
property real itemHeight: height/5
clip: true
PathView {
id: view
anchors.fill: parent
//number of items visible on the path at any one time.
pathItemCount: height/itemHeight
// Ensuring the selected componenet to be at the center
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
// select maximum distance from the path that initiate mouse dragging
dragMargin: view.width
//Declare the path of list
path: Path {
startX: view.width/2; startY: -itemHeight/2
PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight/.8}
}
}
}
The main.qml snippet
main.qml
.......
ContentModel{
id: ContentModel_spinner
width: ContentModel_scroll.width; height: ContentModel_scroll.height
focus: true
model: 20
delegate: Text { font.pixelSize: index === ContentModel_spinner.currentIndex ? sec_spinner.height/4 : ContentModel_spinner.height/4.5; text: formatindex(index); height: ContentModel_scroll.height }
}
Check the tutorial here. They have given examples with different shapes of path views.