qml 不刷新放大还原,QT5 QML ListView的内容放大

最新推荐文章于 2023-12-29 11:14:18 发布

Maple丿锋

最新推荐文章于 2023-12-29 11:14:18 发布

阅读量217

点赞数

文章标签： qml 不刷新放大还原

博主正在尝试用C++和QML构建一个图像查看器，采用模型/视图方法。遇到的问题是，当调整Image组件的scale属性进行缩放时，缩放减小会增加图片之间的间距，缩放增大则导致图片重叠。此外，希望在缩放时能显示水平滚动条，但未能实现。已经尝试了根据建议修改代码，现在图片可以正确缩放，但ListView整体大小随图片缩放而变化，不是期望的效果。寻求帮助解决这些问题。

摘要由CSDN通过智能技术生成

I am trying to implement an image viewer (sort of):

model/view approach

using both c++ and qml

the images are just a ListView filled up with Image (delegate) items

Here is a piece of code:

property double zoomFactor: 1.5;

property double imgScale: 1;

CustomToolBar

{

id: toolBar

onZoomInSignal:

{

imgScale = imgScale*zoomFactor;

}

onZoomOutSignal:

{

imgScale = imgScale/zoomFactor;

}

onZoomFitSignal:

{

imgScale = 1;

}

Rectangle

{

id: bgRect

Layout.fillWidth: true

Layout.fillHeight: true

color: "Grey"

anchors.margins: 10

ScrollView

{

id: scrollView

anchors.fill: parent

ListView

{

id: listView

anchors.fill: parent

clip: true

spacing: 10

model: listItemModel

anchors.top: parent.top

anchors.bottom: parent.bottom

anchors.left: parent.left

anchors.right: parent.right

anchors.margins: 10

boundsBehavior: Flickable.StopAtBounds

delegate: Image

{

id: item_id

anchors.horizontalCenter: parent.horizontalCenter

source: item_img_path + "/" + Math.random()

scale: imgScale

}

The images are loaded correctly, I need to be able to zoom them.

In order to zoom I just modify the scale property of the Image delegate.

Images not scaled (scale = 1) CORRECT:

Images unzoomed (scale = 1/1.5) WRONG! images spacing (?) is being incremented:

Images zoomed (scale = 1.5) WRONG! images overlap:

As you can see, zoom minus increments the spacing (I'm quite not sure it is really the spacing) between the images, and zoom plus overlaps the images.

Furthermore, it would be nice to have the horizontal scrollbar for the ScrollView when zooming in, but I cannot achieve this.

Can anyone help me?

Thanks

EDIT:

Following the solution proposed by grillvott the images are zoomed in/out correctly, but the whole ListView is getting smaller/bigger with them:

The result should be instead something like this (gimp mode ON):

Any idea?

解决方案

I don't think that scale will take any boundaries into consideration. You could encapsulate the image and use fillMode to make sure the image scales accordingly:

delegate: Item {

anchors.horizontalCenter: parent.horizontalCenter

width: img.sourceSize.width * imgScale

height: img.sourceSize.height * imgScale

Image {

id: img

anchors.fill: parent

source: item_img_path + "/" + Math.random()

fillMode: Image.Stretch

}