Qt快速添加梯度框架圖片

Question

我正在使用Qt 5.4.1及其Qt Quick模塊應用程序。我從/images目錄加載一些.svg圖片，然後在ListView中顯示它們，這很好。但是，如何在每個加載的.svg圖像周圍添加陰影漸變？這裏是MWE：

import QtQuick 2.4 
import QtQuick.Controls 1.3 
import QtQuick.Window 2.2 
import QtQuick.Dialogs 1.2 

import Qt.labs.folderlistmodel 2.1 

Rectangle 
{ 
    id: ueMainWindow 

    visible: true 

    width: 800 
    height: 1280 

    color: "black" 

    property string ueRootDirectory:"/images" 
    property real ueImagesLoadProgress; 
    property bool ueImageLoading; 

    Rectangle 
    { 
     id: ueContainerThumbnails 

     antialiasing: true 

     color: "black" 

     anchors.bottom: ueMainWindow.bottom 
     width: ueMainWindow.width 

     height: 256 

     gradient: Gradient 
     { 
      GradientStop { position: 0.0; color: "black" } 
      GradientStop { position: 1.0; color: "grey" } 
     } 

     Text 
     { 
      id: ueTextImageName 

      antialiasing: true 

      color: "white" 

      anchors.horizontalCenter: ueContainerThumbnails.horizontalCenter 

      text: qsTr("TestApp") 
     } 

     ListView 
     { 
      id: ueViewThumbnails 

      antialiasing: true 

      orientation: ListView.Horizontal 

      anchors 
      { 
       topMargin: parent.height-(parent.height-50) 
       fill: parent 
      } 

      FolderListModel 
      { 
       id: ueModelImages 

       folder: "file://"+ueRootDirectory 
       nameFilters: ["*.svg"] 
      } 

      Component 
      { 
       id: ueDelegateImage 

       Image 
       { 
        id: ueImage 

        source: ueModelImages.folder + "/" + fileName 

        antialiasing: true 

        asynchronous: true 

        horizontalAlignment: Image.AlignHCenter 
        verticalAlignment: Image.AlignVCenter 

        width: 192 
        height: 192 

        fillMode: Image.PreserveAspectFit 
       } 
      } 

      focus: true 
      spacing: 10 
      leftMargin: 10 
      rightMargin: 35 
      visible: ueModelImages.status==FolderListModel.Ready 

      model: ueModelImages 
      delegate: ueDelegateImage 
     } 
    } 
} 

Answer 1

那麼，你應該把那個梯度以某種方式放入你的委託。您可以：

• 創建一個空Item，把Rectangle和Image裏面

例如：

Component { 
    id: ueDelegateImage 
    Item { // container 
     Rectangle { 
      // gradient rectangle 
     } 
     Image { 
      // image 
     } 
    } 
} 

• 或將Image內Rectangle

例如：

Component { 
    id: ueDelegateImage   
    Rectangle { 
     // gradient rectangle acts as a container 
     Image { 
      // image 
     }    
    } 
} 

在兩種情況下堆疊順序將繪製圖像後面的梯度矩形。代表只能有一個根元素，但不限於只有一個元素，您可以根據需要嵌套多個元素。