QML- Image在布局中大小不能适应

最新推荐文章于 2025-05-06 09:59:59 发布

最爱吹吹风

最新推荐文章于 2025-05-06 09:59:59 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： QT

本文链接：https://blog.csdn.net/linfengmove/article/details/106723205

QT 专栏收录该内容

26 篇文章

订阅专栏

QML中的Image组件在布局中可能出现缩放问题，不按预期等比例调整大小。通过设置width和height属性可以解决这个问题，确保等比缩放。例如，设置height为16能正确显示Image。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际应用Image的过程中，发现加入布局中以后Image的缩放就会有问题，即使指定了

fillMode:Image.PreserveAspectFit也会发现图片显示大小虽然得到了调整，但是实际在布局中占用的宽度并没有调整

Rectangle{
    width: 800
    height: 600
    color: "white"
    RowLayout{
        Image {
            id:first
            Layout.preferredHeight: 16
            source: "qrc:/icon_sidebar_im_check.png"
            fillMode:Image.PreserveAspectFit
            horizontalAlignment: Image.AlignLeft
        }
        Image {
            id:second
            Layout.preferredHeight: 16
            source: "qrc:/icon_sidebar_im_check.png"
            fillMode:Image.PreserveAspectFit
            horizontalAlignment: Image.AlignLeft
        }
    }
}

效果如下:

仔细看过QML中的例子后发现，等比的缩放调节是根据Image的width和height属性来调节的，那直接设置height:16

Rectangle{
    width: 800
    height: 600
    color: "white"
    RowLayout{
        Image {
            id:first
            Layout.preferredHeight: 16
            height:16
            source: "qrc:/icon_sidebar_im_check.png"
            fillMode:Image.PreserveAspectFit
            horizontalAlignment: Image.AlignLeft
        }
        Image {
            id:second
            Layout.preferredHeight: 16
            height:16
            source: "qrc:/icon_sidebar_im_check.png"
            fillMode:Image.PreserveAspectFit
            horizontalAlignment: Image.AlignLeft
        }
    }
}

效果如下:

OK了。