【Qt Quick】Image

加载图片

Image {
      width: 130; height: 100
      source: "../Image/TBH.png"
  }

不透明度

opacity: 0.5

拉伸图片的方法

说明

在不同场景中图片的显示方法也不同，平铺拉伸等。

写法

1. Stretch（默认）

图像被缩放以适应

Image {
      width: 130; height: 100
      source: "qtlogo.png"
  }

2. PreserveAspectFit

图像等比缩放

Image {
      width: 130; height: 100
      fillMode: Image.PreserveAspectFit
      source: "qtlogo.png"
  }

3. PreserveAspectCrop

图像均匀缩放以填充，必要时裁剪

Image {
      width: 130; height: 100
      fillMode: Image.PreserveAspectCrop
      source: "qtlogo.png"
      clip: true
  }

4. Tile

平铺

 Image {
      width: 120; height: 120
      fillMode: Image.Tile
      horizontalAlignment: Image.AlignLeft
      verticalAlignment: Image.AlignTop
      source: "qtlogo.png"
  }

5. TileVertically

垂直拉伸

Image {
      width: 120; height: 120
      fillMode: Image.TileVertically
      verticalAlignment: Image.AlignTop
      source: "qtlogo.png"
  }

6. TileHorizontally

水平拉伸

 Image {
      width: 120; height: 120
      fillMode: Image.TileHorizontally
      verticalAlignment: Image.AlignLeft
      source: "qtlogo.png"
  }

抗锯齿处理

较大图片缩小显示时，会有明显的锯齿感

处理之后的图片会明显平滑很多

手动进行设置大小

sourceSize: Qt.size(60,60)

绝对路径的图片加载方法

在绝对路径前+file:///

代码

说明

在面板中输入网址点击Open进行加载，可以加载网络图片或者本地图片。

import QtQuick 2.0
import QtQuick.Controls 2.5

Item {
    id:root
    anchors.fill: parent

    Rectangle{
        anchors.top:parent.top
        width: parent.width
        height: parent.height - 80
        color: "#121212"

        //设置等待加载时的转圈
        BusyIndicator{
            id:busy
            running: true
            anchors.centerIn: parent
            z:2
        }

        Text{
            id:stateLabel
            visible: false
            color: "white"
            font.pointSize: 30
            anchors.centerIn: parent
            z:3
        }

        Image {
            id: imageViewer
            asynchronous: true//网络加载时此属性不起作用
            cache:false//为false告诉图片不用缓存
            anchors.fill: parent
            fillMode: Image.PreserveAspectCrop //图片被均匀的缩放用来适应不需要裁剪的情况
            onStatusChanged: {
                if(imageViewer.status === Image.Loading){
                    busy.running = true
                    stateLabel.visible = false
                }else if(imageViewer.status === Image.Ready){
                    busy.running = false
                }else if(imageViewer.status === Image.Error){
                    busy.running = false
                    stateLabel.visible = true
                    stateLabel.text = "ERROR"
                }
            }
        }

//        Component.onCompleted: {
//            imageViewer.source =
//            "file:///D:\\aFX_WP\\Qt_code\\LoderImage\\maps\\3318.jpg"
//        }
    }

    Button{
        id:i_BtnOpen
        width: 80
        height: 30
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 20
        Text{
            text:"Open"
            anchors.centerIn: parent
            font.pointSize: 18
        }
        onClicked: {
            imageViewer.source = i_TInput_Path.text
        }
    }
    Rectangle{
        width: 400
        height: i_BtnOpen.height
        anchors.left: i_BtnOpen.right
        anchors.leftMargin: 20
        anchors.top: i_BtnOpen.top
        color: "black"
        TextInput{
            id:i_TInput_Path
            anchors.fill: parent
            color: "light gray"
            font.pointSize: 14
            verticalAlignment: Text.AlignVCenter
            selectByMouse: true//允许鼠标选择输入框内的文字
            selectionColor: "sky blue"
            clip: true
        }
    }

}