I have a problem with changing progress bar color in QML Dial Component. I tried to use Canvas but finally i did nothing. Any suggestions or examples?
Dial {
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
black progress bar
As indicated in this another answer you can use palette, for this you can check the source code, so the solution is:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Dial {
// #disable-check M17
palette.dark: "red"
value: .5
anchors.centerIn: parent
}
}
Another way to change the color of an Item is ColorOverlay, which has RGBA support.
https://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html#details
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Dial {
id: dial
value: .5
anchors.centerIn: parent
}
ColorOverlay {
anchors.fill: dial
source: dial
color: "#80800000"
}
}
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.
Imagine the following:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
TextField {
anchors.centerIn: parent
onEditingFinished: console.log("input is: " + text)
}
}
How do I achive that the input of the TextField is accepted (onEditingFinished emitted), on clicking anywhere outside of the TextField (not pressing enter, tab,.. just a mouse click)?
I might set a MouseArea around it with onClicked: forceActiveFocus() to force onEditingFinished, but how do I achive this within a large application with many layers/views? This does not seem to be the right solution.
You can take this approach:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: {
if (root.activeFocusItem != null) {
root.activeFocusItem.focus = false;
}
}
}
TextField {
anchors.centerIn: parent
onEditingFinished: console.log("input is: " + text)
}
}
This places a single MouseArea filling your Window as a backstop to anything that might appear above it. Either a mouse click will be accepted by a control sitting above the mouse area or will pass through to it and clear focus on anything that might have it.
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
}
}
I working on a qt qml application and I want to use the virtual keyboard feature of qt quick. But I want the virtual keyboard to appear only when I touch my laptop screen. The current solution of mine brings virtual keyboard up even when I click mouse on the editable area.
I tried to a lot but couldnt get close to solution. I was thinking of suppressing the mouse click event on the Input Panel but couldnt figure out how
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
import QtQuick.VirtualKeyboard 2.1
import QtQuick.Window 2.12
ApplicationWindow {
visible: true
width: 720
height: 480
minimumWidth: 400
minimumHeight:350
TabView {
id:frame
anchors.fill: parent
style: myTabViewStyle
implicitHeight: 100
Tab{
id: setupPage
objectName:"TabParentOfSetup"
enabled: true
title: "Setup"
active: true
SetupTab { }
}
Tab{
id:tabletab
objectName: "TabParentOfTable"
title: "Table"
TableTab{}
}
}
statusBar: StatusBar
{
Label{
id: label
}
}
InputPanel {
id: inputPanel
y: Qt.inputMethod.visible ? parent.height - inputPanel.height :
parent.height
anchors.right: parent.right
anchors.left: parent.left
}
}
i'm learning Qt5. I start with a really simple QtQuick QML app with just one image filling the background. It works, but when i resize the window (Windows 8.1 64 bit), the resize is not smooth. There is substantial jitter and sometimes significant lag. It should be using OGL for this right?
Here's my code:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
MainForm {
anchors.fill: parent
}
}
and
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
visible: true
width: 640
height: 480
Image {
id: image1
sourceSize.height: 687
sourceSize.width: 1280
smooth: false
anchors.fill: parent
source: "images/showcase1280.jpg"
}
}
suggetions appreciated.
It is not smooth.
The image has a property named smooth the aim of which is to hold:
[...] whether the image is smoothly filtered when scaled or transformed.
Another interesting property is mimap, for which the documentation says that:
This property holds whether the image uses mipmap filtering when scaled or transformed.
Mipmap filtering gives better visual quality when scaling down compared to smooth, but it may come at a performance cost (both when initializing the image and during rendering).
Note that in your code you set:
smooth: false
Maybe you are doing it wrong if you want smooth changes, try setting the above mentioned properties to true.
I`m not pretend by solve your task. But i think you can use animation, as a variant:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
Item {
Image {
anchors.centerIn: parent
width: parent.width
height: parent.height
sourceSize.height: 1000
sourceSize.width: 2000
source: "https://upload.wikimedia.org/wikipedia/ru/archive/8/88/20090512220306!Qt_logostrap_CMYK.png"
smooth: false
fillMode: Image.Stretch
asynchronous: true
Behavior on width {
animation: whAnimation
}
Behavior on height {
animation: whAnimation
}
NumberAnimation {
id: whAnimation
duration: 150
}
}
}