I have a QQuickView inside another widget using createWindowContainer() (see image below). The QML scene file of the QQuickView looks something like:
//import related modules
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2
import QtMultimedia 5.6
Rectangle {
width: 200
height: 100
color: "red"
...
}
I can see the qml object in the QQuickView, but what I'd really like is to be able to resize the QML scene to fit the container. I've looked at various docs and haven't found a way to reference the container in the QML scene to properly resize. Is that possible? Something like this?
Rectange {
width: Container.width
height: Container.height
}
Just remove size setting and add anchors.fill: parent to the
Rectangle. Another way is to set
view->setResizeMode(QQuickView::SizeRootObjectToView); in C++
Using the solution folibis provided works great (the first one).
Related
When I create a tumbler widget in QML, I can grab it, and change the contents. As soon as I leave the widget with my mouse in vertical direction, the tumbler stops changing its contents. It works fine if I leave the widget to the left or right. In that case, I can operate the tumbler even when the mouse leaves the QML window.
Is there anything I missed?
Example code:
import QtQuick 2.5
import QtQuick.Controls 2.5
Rectangle {
width: 1000
height: 600
Tumbler {
anchors.centerIn: parent
model: 24
width: 30
height: 100
}
}
I'm using QT 6.2.1 and tried it on Kubuntu 20.04 and Yocto Dunfell.
I tried the same thing with a QML Dial. Herewith I can leave the widget in all directions, and it still reacts to my mouse movement.
I plan to add a button on flow1 that will make column slide from right to left very fast so I can change some options and then give it ok so it slides back. It's kinda like when you swipe from left to right on Android and it slides a column for you to make chnges.
As you can see, I placed the column right after the flow1. The plan is to add an animation that makes both viewers slide left until most of the screen is covered by column.
Is this the right way to do it? I don't feel confortable about hiding this off the screen and making them appear.
Is it even possible to animate qt quick positioners?
I think you are looking for the Drawer component (available in Qt 5.7 and greater).
You can control the edge of the window at which the drawer will open from with the edge property.
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
visible: true
Drawer {
id: drawer
width: 0.66 * window.width
height: window.height
// Make drawer comes from the right
edge: Qt.RightEdge
Column {
id: column
// Your column contents
}
}
}
I've got a qml based application which renders fine as long as it is not maximized. The error occurs to different extend on different platforms and on resizing/unmaximizing the window everything goes back to normal. On linux it looks like the window freezed but if you resize it you will see that e.g. previous button clicking indeed triggered something but no visual update was shown during that time. On windows (7), updates and reacting to user input is shown but there are a lot of artifacts duplicating the state before the window was maximized that wont disappear until resizing, so a portion of the window is not refreshed here too
Does somebody have any idea by what may cause this behavior? Can I - in the worstcase - disable that the window can be maximized?
Edit:
I tested it with a minimal qt quick controls 2 template application again without modification and i have the same behavior (tested on ubuntu)
The example I used is quite simple and still the issue is still present:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1 {
}
Page {
Label {
text: qsTr("Second page")
anchors.centerIn: parent
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("First")
}
TabButton {
text: qsTr("Second")
}
}
}
Its the simple template from New Project > Applications > Qt Quick Controls 2 Application in Qt Creator. I tested it with Qt 5.9.1 and 5.10.0
Maybe a general qt problem in conjuction with graphics drivers?
How can I change the color of the line that highlites the selected tab in the TabBar?
According to #jpnurmi's comment, the best and easiest solution here is to utilize QtQuick.Controls.Material:
import QtQuick.Controls.Material 2.0
and then you can set Material.accent for TabBar:
TabBar {
Material.accent: Material.Red
}
You need to customize the TabBar.
See the documentation:
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbar
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbutton
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button
As it is written there, the TabButtons have a background and a contentItem.
You can assign your own delegates to those properties as seen in the documentation example. In your case you probably need a tailored Rectangle as background.
You can use the different properties of the TabButton to define styles for all their states.
This question is a little specific, but I've been unable to find someone with the same problem or a clean solution to the problem.
I'm creating a Qt Quick program, and I want to use a QListView as it appears in QtWidgets. This QtWidgets program has three such views, with checkable items (which is optional: not all QListViews have checkable items).
Because Qt Quick Components doesn't appear to have a QListView equivalent, I set out to make my own from existing components. And the result is ... meh. It looks like this and doesn't exactly behave in the same fashion. Clicking on the text/whitespace of an item checks the item, instead of highlighting it. And the border is just ugly, and doesn't appear in GTK-themed environments. It also doesn't obey custom desktop themes, because the background of the items will always be white.
The code for this custom component is fairly brief, and looks like this:
import QtQuick 2.4
import QtQuick.Controls 1.3
// GroupBox creates a border... most of the time. Not in GTK envs
GroupBox {
id: root
property var model: null
// This wraps the ListView up with a scrollbar
ScrollView {
anchors.fill: parent
ListView { // This is the view component
anchors.fill: parent
model: root.model
// This is the white box that the CheckBox is drawn on
delegate: Rectangle {
width: parent.width
height: box.height
// This is the actual item
CheckBox {
id: box
anchors.fill: parent
text: thing // `thing` is just a placeholder value from the model
}
}
}
}
}
Use a QApplication instead of a QGuiApplication. It will require you to add widgets support (and ship Qt widgets libs). This way, Qt Quick Components will automatically get access to much more system theming like background color in text selection.
Additionally, SystemPalette will provide you with a bunch of native colors that you can use if you want.
Unsatisfying system integration using QGuiApplication:
Nice integration using QApplication: