QT5 QML ListView的内容放大

问题描述

我想实现一个图像浏览器（排序）：

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

• 模型/视图的方法


• 同时使用C ++和QML


• 图像都只是的ListView 与图片（委托）项目填补了

• model/view approach
• using both c++ and qml
• the images are just a ListView filled up with Image (delegate) items

下面是一块code的：

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.

• 图片不进行缩放（ =规模1 ）更正：

• Images not scaled (scale = 1) CORRECT:

• 图片未缩放（ =规模的1 / 1.5 ）错了！ （？）图像间隔递增：

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

• 图片缩放（规模= 1.5 ）错了！图像重叠：

• 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.

谁能帮我？

感谢

编辑：

继solution由提出的图像在/缩小正确，但整个的ListView 正变得越来越小/大与他们：

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

结果应该不是这样的（GIMP模式ON）：

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

任何想法？

推荐答案

我不认为扩展将采取任何边界考虑。你可以封装的映像，并使用在fillMode ，以确保图像相应缩放：

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
    }
}

这篇关于QT5 QML ListView的内容放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！