I've created this QML window but when I grab it's border with a mouse and resize it contents of window are repainted very slow. You can clone my repo and test it yourself. Any ideas how to improve performance?
import QtQuick 2.0
Rectangle {
id: root
width: 600
height: 600
color: "lightgrey"
ListView {
model: mainModel
spacing: 5
width: parent.width
orientation: ListView.Horizontal
delegate: Rectangle {
//width: parent.desiredWidth / mainModel.dataLen()//+ " " + model.sort
width: root.width / mainModel.dataLen() - 10
//width: 200
ListView {
id: lv1
ScrollBar {
flickable: lv1
vertical: true
hideScrollBarsWhenStopped: false
scrollbarWidth: 5
}
model: homm
spacing: 5
width: parent.width
height: 150
orientation: ListView.Vertical
delegate:
Rectangle {
radius: 5
anchors.rightMargin: 5
anchors.leftMargin: 5
width: lv1.width
height: 20
color: "black"
Text { text: model.name
anchors.fill: parent
color: "white"
}
}
}
}
}
}
In this QML I have listView of listViews which visualize ListModel of ListModels. homm is a property name for main model. Inner models' elements have a property named name. You can browser code of these classes here and here.
Related
I am learning Qml newly and i am trying to customize a slider as below
Animation to SliderBar & Text
And i was unable to figure the part how to apply animation or color the slider with thick red when slider handle is being dragged and apply fade out animation to text in parallel when the slider handle is being dragged.
I tried with ColorAnimation to achieve the coloring slider when handler is dragging and text part not able to figure out.
Attaching the code that i tried to achieve the expectation
Slider{
id:control
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
Attaching image of what i was able to achieve
What i achieved
If anyone now's how to render the text and apply fade out animation to the text when slider handle is being dragged, help is much appreciated.
Thanks in advance !!
Regarding the animation on the fading out your text. You could do the following without even the need of an animation react to onPositionChanged of the slider and change the opacity property of the text.
Edit: Adjusted my answer to your code changes.
Slider{
id:control
onPositionChanged:{
backgroundText.opacity = 1-position
}
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
Text{
id:backgroundText
text: "Slide to Send"
color:"black"
anchors{
centerIn: parent
}
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
I need to save a QML item as image. I use grabToImage() method (https://doc.qt.io/qt-5/qml-qtquick-item.html#grabToImage-method) and it works well when my item is completely on the screen. But the item is a ScrollView and sometimes it's parts are outside the view. And I want to have full item on image. is it possible?
Here is an example to my problem:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.2
Window {
width: 640
height: 480
visible: true
title: qsTr("Example")
Button {
text: qsTr("Save as image")
onClicked: {
scheme.grabToImage(function(result) {
result.saveToFile("temp.png")
});
}
}
ScrollView {
id: scheme
y: 50
clip: true
width: 400
height: 200
contentWidth: rect.width
contentHeight: rect.height
Rectangle {
id: rect
width: 600
height: 400
color: "gray"
Rectangle {
x: 0
y: 0
width: 100
height: 100
color: "blue"
}
Rectangle {
x: 500
y: 300
width: 100
height: 100
color: "red"
}
}
}
}
Instead of grabbing the ScrollView (which only has size of 400x200), grab the child of ScrollView (which is the full 600x400).
rect.grabToImage(function(result) {
result.saveToFile("temp.png")
});
I am working with QML to try to display an image. I have the following code:
Rectangle {
id: border
anchors {
top: parent.top;
topMargin: vpx(20);
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Image {
id: picture
width: parent.width
height: parent.height
transformOrigin: Item.Center
rotation: (implicitWidth/implicitHeight > 1.3) ? 270 : 0
anchors.fill: border
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
If rotation is set to 0, it scales correctly to fill the rectangle. If rotation is set to 270, it doesn't fill the rectangle - it rotates correctly, but it is well within the rectangle in both directions. It should have scaled up more.
Why is this happening?
EDIT: The code above has been edited. All of the above code is within a larger rectangle. The purpose of this code is to rotate images 90 degrees when they have a width > height. When rotation is set to 0 (i.e. height > width and no rotation needed), the picture displays as the first case below. When set to 270 (i.e. width > height, rotation needed), the picture displays as the second case below. I would like it to be comparable to the first picture, which fills the width, as I understand "fillMode: Image.PreserveAspectFit" should work.
black is rectangle, red is the image.
It is kind of tricky, but you can try this way:
Rectangle {
id: border
anchors {
top: parent.top;
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Item {
id: pictureItem
transformOrigin: Item.Center
rotation: (picture.implicitWidth/picture.implicitHeight > 1.3) ? 270 : 0
anchors.centerIn: parent
width: rotation == 270 ? parent.height : parent.width
height: rotation == 270 ? parent.width : parent.height
Image {
id: picture
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
}
}
I have prepared two test images:
And this is what I get with above chunk of code:
I'm looking for a solve for my example. I want drag a corner of rectangle and it will change scale but when i drag corner to zoom out rectangle then it error.
Please, give a solve. Thanks very much!
======================================================================================================================================================
My code:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
title: qsTr("Test Crop")
width: 640
height: 480
visible: true
property double photohfake: selComp.height
property double photowfake: selComp.width
property double photowold: selComp.width
property double photohold: selComp.height
Image {
id: image1
anchors.fill: parent
source: "http://dongdomobile.vn/wp-content/uploads/2014/09/Cute-Grey-Seamless-Pattern-For-Website-Background-300x136.jpg"
Rectangle {
x:parent.width / 4
y: parent.height / 4
width: parent.width / 2
height: parent.width / 2
id: selComp
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
Rectangle {
width: 18
height: 18
color: "steelblue"
anchors.verticalCenter:parent.top
anchors.horizontalCenter: parent.left
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAndYAxis }
onPositionChanged: {
console.log("mouseX "+mouseX)
console.log("mouseY "+mouseY)
if(drag.active){
photohfake=photohfake-mouseY //calculator new height
selComp.scale=selComp.scale/photohold*photohfake //calculator new scale
photowfake=photowold*photohfake/photohold //calculator new width
selComp.x+=(photowold-photowfake)/2
selComp.y+=mouseY/2
console.log("photohfake "+photohfake)
console.log("photohold "+photohold)
photohold=photohfake
photowold=photowfake
console.log("selComp.scale "+selComp.scale)
if(selComp.scale<0.5)
selComp.scale=0.5
else if(selComp.scale>4)
selComp.scale=4
}
}
}
}
}
}
}
If by errors you mean the rectangle moving weirdly when resizing, this should fix it:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
title: qsTr("Test Crop")
width: 640
height: 480
visible: true
Rectangle {
id: image1
anchors.fill: parent
color: "lightgrey"
Rectangle {
x:parent.width / 4
y: parent.height / 4
width: parent.width / 2
height: parent.width / 2
id: selComp
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
Rectangle {
width: 18
height: 18
color: "steelblue"
anchors.verticalCenter:parent.top
anchors.horizontalCenter: parent.left
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAndYAxis }
onPositionChanged: {
if(drag.active){
var delta = Math.max(mouseX, mouseY)
var newWidth = selComp.width - delta
var newHeight = selComp.height - delta;
if (newWidth < width || newHeight < height)
return
selComp.width = newWidth
selComp.x = selComp.x + delta
selComp.height = newHeight
selComp.y = selComp.y + delta
}
}
}
}
}
}
}
I am developing an iOS app using Appcelerator.
In this app I got a main wrapper view and some subviews. I need them to be placed under each other using the layout vertical property but they all stack in a pile (not on separate "rows").
What is wrong with the code below?
// Create the padding view
container = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 460,
backgroundColor: '#000'
});
// Create the padding view
wrapper = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 'auto',
layout: 'vertical'
});
// Create the padding view
label = Ti.UI.createLabel({
text: e.label,
color: e.color,
font:{fontSize:36,fontWeight: 'normal'},
top: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_label = Ti.UI.createLabel({
text: 'Lorem Ipsum is',
color: '#fff',
font:{fontSize:26,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_data = Ti.UI.createLabel({
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer',
color: '#fff',
font:{fontSize:12,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Add label to wrapper
wrapper.add(label);
// Add label to wrapper
wrapper.add(perks_label);
// Add label to wrapper
wrapper.add(perks_data);
// Add wrapper to container
container.add(wrapper);
// Return the row
return container;
It seems like the top and left of perks_label and perks_data should be different. Try setting the perks_data to top:50.
Thanks,
I've hit this wall before. Have you set the layout for the current window to 'vertical'? So, from the window that you add the container to, set its layout to vertical:
var win = Titanium.UI.currentWindow;
win.layout = 'vertical';