I encountered a bad performance of my implementation of ResizeArea, please help me to speed up...
How I would use :
ApplicationWindow {
id: rootWindow
width: 1280
height: 768
minimumHeight: 768
minimumWidth: 1280
visible: true
flags: Qt.FramelessWindowHint | Qt.CustomizeWindowHint
ResizeArea{
height: parent.height
anchors.left: parent.left
anchors.leftMargin: 0
width: 3
}
}
ResizeArea.qml:
MouseArea {
id: mr
cursorShape: Qt.SizeHorCursor
property int clickPosX
onPressed: {
clickPosX = mouseX
}
onPositionChanged: {
rootWindow.setWidth(rootWindow.width+(mouseX-clickPosX))
}
}
It works, but slowly.
I think implementation with dragItem should be faster, but I don't know how to write it.
Related
I tried to create a child window to show an article that can't be fully displayed by the window. For now, I can slide the page through dragging the ScrollBar (QML Type), but I want to slide it by using the mouse wheel as well.
Here is the code:
import QtQuick 2.2
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id:privacyWindow
width: 640
height: 480
title:qsTr("Privacy")
Rectangle {
id: privacy
clip: true
width: privacyWindow.width
height: privacyWindow.height
anchors.centerIn: parent
Rectangle {
id: textArea
clip: true
width: privacyWindow.width - 150
height: privacyWindow.height
anchors.centerIn: parent
Text {
id: content
width: textArea.width
text: ""
wrapMode: Text.WordWrap
textFormat: Text.RichText
//x: -horizontalBar.position * width
y: -verticalBar.position * height
}
}
ScrollBar {
id: verticalBar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: privacy.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
Any help would be greatly appreciated! Thank you. :)
I have managed to solve it by replacing Rectangle with Flickable.
import QtQuick.Controls 2.12
Window {
id: privacyWindow
width: 640
height: 480
title:qsTr("Privacy")
Flickable {
id: flickable
clip: true
width: privacyWindow.width - 150
height: privacyWindow.height
contentWidth: content.width
contentHeight:content.height
anchors.centerIn: parent
Text {
id: content
width: flickable.width
text: ""
wrapMode: Text.WordWrap
textFormat: Text.RichText
}
ScrollBar.vertical: ScrollBar {
parent: flickable.parent
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
Trying to implement ListView's content scroll by clicking on a button. When scrolling towards the end of the view ListView's content does not stop at the end of the last picture it overscrolls. Below I provided the minimum working example as well as the preview what goes wrong. Just change the .img path to make it work on your PC. I was looking for some help in sources of ListView and its inherited parent Flickable but nothing that could help to resolve the problem. How to make it stop at the end of the last picture?
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
visible: true
width: 1024
height: 300
Item {
id: root
anchors.fill: parent
property var imagesUrlModel: ["file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg",
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg"
]
property int _width: 0
Component {
id: imageDelegate
Image {
id: image
sourceSize.height: 300
source: modelData
fillMode: Image.Stretch
}
}
Rectangle {
id: leftButton
anchors.top: root.top
anchors.bottom: parent.bottom
anchors.topMargin: 15
anchors.leftMargin: 10
anchors.left: parent.left
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
listView.contentX = listView.contentX > 0
? listView.contentX - 50 > 0 ? listView.contentX - 50 : 0
: 0
}
}
}
Rectangle {
id: rightButton
anchors.top: root.top
anchors.bottom: parent.bottom
anchors.topMargin: 15
anchors.rightMargin: 10
anchors.right: parent.right
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
listView.contentX = listView.contentX < listView.contentWidth
? listView.contentX + 50
: listView.contentWidth
//wrong content width
}
}
}
ListView{
id: listView
clip: true
boundsBehavior: Flickable.StopAtBounds
anchors.topMargin: 15
anchors.left: leftButton.right
anchors.right: rightButton.left
anchors.top: root.top
anchors.bottom: parent.bottom
spacing: 5
orientation: ListView.Horizontal
model: root.imagesUrlModel
delegate: imageDelegate
}
}
}
In your example just change listView.contentWidth to listView.contentWidth-listView.width in onClicked event for rightButton. But that's not enough. You should check whether the listView.contentX+50 is not overflowing listView.contentWidth-listView.width before you update the listView.contentX. In such case you need to update listView.contentX with difference between listView.contentWidth and listView.width.
Here it is:
listView.contentX = listView.contentX+50 <= listView.contentWidth-listView.width
? listView.contentX + 50
: listView.contentWidth - listView.width
I used another approach with repeater and scrollview and it has worked!
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
visible: true
width: 1024
height: 300
Item {
id: contentItem
anchors.fill: parent
Rectangle {
id: rightButton
anchors.top: contentItem.top
anchors.bottom: contentItem.bottom
anchors.rightMargin: 10
anchors.right: contentItem.right
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
var allowedWidth = scrollView.flickableItem.contentWidth - scrollView.viewport.width
if(row.width < scrollView.viewport.width){
return
}
var offset = scrollView.flickableItem.contentX + 50
if(offset <= allowedWidth){
scrollView.flickableItem.contentX += 50
}
else {
scrollView.flickableItem.contentX = allowedWidth
}
}
}
}
ScrollView {
id: scrollView
anchors.left: contentItem.left
anchors.right: rightButton.left
anchors.top: contentItem.top
anchors.bottom: contentItem.bottom
clip: true
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
property var imagesUrlModel: [
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg",
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg"
]
Row {
id: row
spacing: 15
Repeater {
id: repeater
anchors.left: parent.left
anchors.right: parent.right
model: scrollView.imagesUrlModel
delegate: Component {
id: imageDelegate
Image {
id: image
sourceSize.height: 300
source: modelData
fillMode: Image.Stretch
}
}
}
}
}
}
}
There is a question How to hide an image using transparent rectangle in QML?
The accepted answer is to use OpacityMask.
I created a qml file follow this answer, but didn't get the expected result.
Is there anything wrong in my codes?
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask {
maskSource: hiding_rect
}
source:"qrc:/timg.jpg"
}
Rectangle
{
id:hiding_rect
width: underlyingImage.width/2
height: underlyingImage.height/2
color: "yellow"
}
}
the result picture
I'm not familiar with the approach suggested in the other question.
However, following the approach suggested in the documentation (http://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html), this works:
Window {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
anchors.centerIn: parent
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
source:"file:///tmp/timg.jpg"
visible: false
}
Item {
id:hiding_rect
anchors.fill: underlyingImage
visible: false
Rectangle
{
anchors.left: parent.left
anchors.top: parent.top
width: underlyingImage.width/2
height: underlyingImage.height/2
color: Qt.rgba(1,1,1,1)
z: underlyingImage.z + 1
}
}
OpacityMask {
anchors.fill: underlyingImage
source: underlyingImage
maskSource: hiding_rect
}
}
like the web pages,when content's high beyond the rectangle,there is a scrollbar.
Is there anyone else who can help me?
I have tried with listview,but I can't use it in a rectangle
There is an example in the docs, how to use ScrollBar without a Flickable:
import QtQuick 2.7
import QtQuick.Controls 2.0
Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 160
x: -hbar.position * width
y: -vbar.position * height
}
ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: frame.width / content.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
adding rectangle into flickable solved my problem
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.5
import QtQuick 2.8
Item {
id: item1
visible: true
width: 800
height: 600
ScrollView {
id: frame
clip: true
anchors.fill: parent
//other properties
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
Flickable {
contentHeight: 2000
width: parent.width
Rectangle {
id : rectangle
color: "#a7c4c6"
radius: 6
//visible: !busyIndicator.running
anchors.fill: parent
}
}
}
}
The mobile devices move the elements up the the keyboard is called, but there are elements that stay in the same position when the device's keyboard appears like the images below.
How can I keep a Qml item fixed in the same position when device's keyboard appears?
I need that the Rectangle with id: principal stays fixed in the same position.
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
visible: true
property int larguraTela: 360
property int alturaTela: 640
width: larguraTela
height: alturaTela
maximumWidth: larguraTela
maximumHeight: alturaTela
minimumWidth: larguraTela
minimumHeight: alturaTela
title: "OverStatusBar"
Rectangle {
id: principal
width: parent.width
height: parent.height * 0.15
anchors.top: parent.top
color: "orange"
}
Rectangle {
width: parent.width
height: parent.height * 0.85
anchors.top: principal.bottom
clip: true
Rectangle{
id: retangulo1
width: parent.width
height: parent.height * 0.5
anchors.top: parent.top
color: "grey"
}
Rectangle {
id: retangulo2
width: parent.width
height: parent.height * 0.5
anchors.top: retangulo1.bottom
color: "lightgrey"
TextField {
id: campoTexto
width: parent.width * 0.7
height: parent.height * 0.20
anchors.centerIn: parent
inputMethodHints: Qt.ImhDigitsOnly
}
}
}
}
Ok, after a long research about this topic I have concluded that there is no possible solution, at least until now, that doesn't involve a lot of workaround programming to solve that using cross-platform programming. I have tried a bunch of cross-platform languages with no satisfactory solution that could be implemented. The languages I tried were:
QML
Appcelerator (Titanium)
PhoneGap (Cordova)
Native Script
React Native
My conclusion is that if I want do develop native look and feel apps that work as expected and without bugs, I need to do it using the native programming languages, even if I need to develop it twice in different languages. And that is what I am doing from now: XCode and Android Studio.
If someone would like to take a look at a piece of code to start doing it in QML just access the link clicking here:
I have something very hackish and begging for refinement but I think it is going into the right direction :
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
visible: true
property int larguraTela: 360
property int alturaTela: 640
width: larguraTela
height: alturaTela
maximumWidth: larguraTela
maximumHeight: alturaTela
minimumWidth: larguraTela
minimumHeight: alturaTela
title: "OverStatusBar"
Rectangle {
id: principal
width: parent.width
height: parent.height * 0.15
anchors.top: parent.top
color: "orange"
}
Timer{
id:resetKeyboard
interval: 500
onTriggered: {
Qt.inputMethod.hide();
Qt.inputMethod.show();
unlock.restart();
}
}
Timer{
id:unlock
interval: 500
onTriggered: {
flickable.updateSlideContent = true;
}
}
Flickable{
id:flickable
width: parent.width
height : slideContent ? parent.height * 0.5 : parent.height * 0.85
anchors.top: principal.bottom
clip: true
contentHeight: parent.height * 0.85
contentY : slideContent ? parent.height*0.35 : 0
property bool updateSlideContent : true
property bool slideContent : false
property bool keyboardVisible : Qt.inputMethod.visible
onKeyboardVisibleChanged: {
if (updateSlideContent) {
slideContent = keyboardVisible;
if (keyboardVisible)
{
updateSlideContent = false;
resetKeyboard.restart();
}
}
}
Rectangle {
anchors.fill: parent
Rectangle{
id: retangulo1
width: parent.width
height: parent.height * 0.5
anchors.top: parent.top
color: "grey"
}
Rectangle {
id: retangulo2
width: parent.width
height: parent.height * 0.5
anchors.top: retangulo1.bottom
color: "lightgrey"
TextField {
id: campoTexto
width: parent.width * 0.7
height: parent.height * 0.20
anchors.centerIn: parent
inputMethodHints: Qt.ImhDigitsOnly
}
}
}
}
}