I have desktop app in which I have a ScrollView that contains a ListView, in which the delegates each contain multiple widgets, including a WebEngineView:
ScrollView
{
id: myScrollView
anchors.fill: parent;
ListView
{
id: myListView
delegate: Item
{
Rectangle
{
Text ...
Text ...
// other stuff
WebEngineView
{
id: myWebEngineView
Component.onCompleted:
{
loadHtml(model.modelData.someHTMLData);
}
}
}
}
}
}
The problem I am having is with scrolling. On Mac, if I use the touchpad to scroll, the ListView only scrolls if the mouse is hovered over one of the non-WebEngineView widgets.
I suspect the WebEngineView widgets are trapping the mouse messages but I cannot find a way stop this from happening. How can I do this?
One thing that I know about Qt Quick is that it has input focus.
According to this, you can play with FocusScopes and focus property.
For example set ListView's focus to true, lay delegate into FocusScope with focus: false. Or set WebEngineView's focus to false.
Hope this helps =)
Related
I am reading the Qt doc to learn the Keyboard Focus in Qt Quick! I run the code which from the document. However, the result is different form the document! The codes are as follows.
main.qml
//Window code that imports MyWidget
Rectangle {
id: window
color: "white"; width: 240; height: 150
Column {
anchors.centerIn: parent; spacing: 15
MyWidget {
focus: true //set this MyWidget to receive the focus
color: "lightblue"
}
MyWidget {
color: "palegreen"
}
}
MyWidget.qml
Rectangle {
id: widget
color: "lightsteelblue"; width: 175; height: 25; radius: 10; antialiasing:
true
Text { id: label; anchors.centerIn: parent}
focus: true
Keys.onPressed: {
if (event.key == Qt.Key_A)
label.text = 'Key A was pressed'
else if (event.key == Qt.Key_B)
label.text = 'Key B was pressed'
else if (event.key == Qt.Key_C)
label.text = 'Key C was pressed'
}
}
The pic1 is the result form doc. And the pic2 is the result of my running which i just copy the code from doc and run it.
pic1
pic2
Is it a bug? Why the result are different?
The doc said:
We want the first MyWidget object to have the focus, so we set its focus property to true. However, by running the code, we can confirm that the second widget receives the focus.
Looking at both MyWidget and window code, the problem is evident - there are three types that set the focus property to true. The two MyWidgets set the focus to true and the window component also sets the focus. Ultimately, only one type can have keyboard focus, and the system has to decide which type receives the focus. When the second MyWidget is created, it receives the focus because it is the last type to set its focus property to true.
My question:
1.Why the result are different?In my result the first widget receives the focus.
2.Also, what is the meaning of"because it is the last type to set its focus property to true"in doc?
The doc you can get from here!
Qt doc
When I run the code I get the same result as you, but it does not matter. The point here is to understand that without FocusScope you have no control on which object receives the focus from the system (you have no guarantee in the order of creation of QML objects).
Did you try to set focus: true on the second MyWidget instead? If you try, the keyboard events will still be received by the first widget, except if you use a FocusScope.
Note that you can also remove focus: true from MyWidget.qml and you won't even need to manually add a FocusScope (it will automatically be managed by the application window).
try run with the following modification:
MyWidget { //the focus is here
color: "palegreen"
}
MyWidget {
focus: true //set this MyWidget to receive the focus
color: "lightblue"
}
MyWidget {
color: "palegreen"
}
I tested many times. The result is the same. Maybe the docs are outdated!
I am testing on my desktop and can't seem to get qml to recognize the PressAndHold event.
Button
{
id: btn_draw
style: cgButtonStyle
width: isPortrait() ? Game.getBannerHeight() : Game.getBannerHeight() / 3
height: isPortrait() ? Game.getBannerHeight() : Game.getBannerHeight() / 3
MouseArea
{
onPressAndHold: iPod4.play()
}
// Much more code
Am I missing a signal somewhere or something? Do I need to add anything else in order for QML to recognize the PressAndHold event? Is it possible other code is preventing PressAndHold from working?
You're missing the MouseArea anchors... the mouse area is zero-sized, and so you can't click it...
Simply modify like that:
MouseArea
{
anchors.fill: parent
onPressAndHold: iPod4.play()
}
and it would work.
I’m using Qt Creator's Qt Quick and as suggested in the tutorial I made different .qml for every button.
I want when the button is clicked to make a window pop- up. What should I write after
onClicked:
in the mouseArea.
Also how to make a second window (the pop- up one), what should I add to the project so I can design it like the main one?
I read that I have to make a class that inherits with QWidget but I need a bit more information.
A short example would be great.
as suggested in the tutorial I made different .qml for every button
Surely you mean "for every button type"!?
To launch a second window:
// Main.qml
Window {
id: win
width: 640
height: 480
Button {
text: qsTr( "Open" )
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
onClicked: {
var factory = Qt.createComponent( "Popup.qml" );
factory.createObject( win );
}
}
}
// Popup.qml
Window {
height: 240
width: 320
title: qsTr( "Popup" )
visible: true
Text {
text: qsTr( "Hello" )
anchors.centerIn: parent
}
}
I read that I have to make a class that inherits with QWidget
Do not mix QML and the Qt Widgets module unless you are extending/converting a legacy system, QML has been designed to replace Qt Widgets (at some point).
I want to create a user interface qtquick2 that can be scaled and includes some desktop components. As mentioned in this blogpost the default rendering for qml/qtquick2 should use distance fields and not native text rendering. I tried to scale qt quick controls. The result is rather disappointing. I was testing on ubuntu 64 and qt-5.1.1. The text on the controls is looking bad but all text in standard qml elements (Text/TextEdit) is looking good when scaled.
This leads me to think that native rendering is the default now for desktop components. Can this be turned of?
Setting render types of Qt Quick Controls will be available in Qt 5.2 using styles, e.g. in TextArea:
TextArea {
/* ... */
style: TextAreaStyle {
renderType: Text.QtRendering
}
}
Supported render types are:
Text.QtRendering
Text.NativeRendering (default)
See TextArea.qml, TextAreaStyle.qml.
For Button and ButtonStyle there is no public interface to set the render type directly in Qt 5.2. But what you can do, is overwrite the label with your own text component:
Button {
id: theButton
/* ... */
style: ButtonStyle {
label: Item {
implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight
property var __syspal: SystemPalette {
colorGroup: theButton.enabled ?
SystemPalette.Active : SystemPalette.Disabled
}
Row {
id: row
anchors.centerIn: parent
spacing: 2
Image {
source: theButton.iconSource
anchors.verticalCenter: parent.verticalCenter
}
Text {
renderType: Text.NativeRendering /* Change me */
anchors.verticalCenter: parent.verticalCenter
text: theButton.text
color: __syspal.text
}
}
}
}
This code is inspired by the default label component of ButtonStyle.qml, modified and untested.
I don't think you can change text rendering in Qt Components since they are explicitly made for the use in desktop applications.
In TextArea for example there is no renderType like in TextEdit.
On the QtDesktopComponents page I another hint:
You have to change QGuiApplication to a QApplication. This is because the components rely on certain widget-specific classes such as QStyle to do native rendering.
I want to create a button using Cascades on Black Berry 10 development which has an image as a background and also possibly a text with white color. I found this class button, but it seems to not support setting an image as a background on the button. What can I do? What are the alternate ways?
Maybe I should consider another library than Cascades for creating my UI??? any suggestions?
Container {
id:account
signal buttonClicked()
layout: DockLayout {
}
preferredWidth: 768.0
topMargin: 40.0
bottomMargin: 40.0
ImageButton {
id: addButton
defaultImageSource: "image/button_normal.png"
pressedImageSource: "image/button_press.png"
horizontalAlignment: HorizontalAlignment.Center
onClicked: {
buttonClicked();
}
}
Label {
text: "Add"
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.BodyText
fontSize: FontSize.Small
color: Color.create("#ffffff")
}
touchPropagationMode: TouchPropagationMode.None
}
}
You can have a button with both text and image by using the default Button class: cascades_button.html">https://developer.blackberry.com/cascades/reference/bb_cascades_button.html
Having a background image on the button with text over top is not really recommended. A button should be clear and easy to read. See the BlackBerry 10 UI Guidelines here: https://developer.blackberry.com/devzone/files/design/bb10/UI_Guidelines_BlackBerry_10.pdf
If you really want to do it, you can always build a custom component in Cascades that has an image with a label over top.
I've faced the same issue.
At the end, as PBernhardt said, I created a custom Container with an ImageView or a background image, and added a Label inside.
Then, I overrided onTouch to catch the different touch states (event.isDown(), event.isMove(), event.isUp()) and update the button graphics accordingly (text color and background image).
I'm using a Q_INVOKABLE method to bind with my C++ files.