qml學習筆記(四)：視覺化元素Rectangle、Image

前話

       前面學習完Item基本元素後，繼續按照qt幫助檔案的介紹順序，學習元素Rectangle、Image

本章節內容

       主要學習了Rectangle、

       注意：中括號[可讀寫]標註讀寫屬性，當可讀寫的時候省略，所以只會在只讀和只寫的時候標註：[只讀] 和 [只寫]。

Rectange

描述

        矩形項用於填充具有純色或漸變的區域，也可以提供矩形邊框。
        繼承於Item，具有Item的所有屬性。

屬性

•  border [邊框]
  •  border.width : int [邊框寬度]
  • border.color : color [邊框顏色]

    Rectangle {
        width: 100
        height: 100
        color: "red"
        border.color: "black"
        border.width: 5
        radius: 10
    }
    

    
    
•   color: color [矩形框填充顏色，參照上面border]
•   gradient: Gradient [漸變色]

Item {
    Rectangle {
        y: 0; width: 80; height: 80
        color: "lightsteelblue"
    }
    Rectangle {
        x: 100; width: 80; height: 80
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.5; color: "white" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }
    Rectangle {
        x: 200; width: 80; height: 80
        rotation: 90 // 旋轉90度
        gradient: Gradient { // 只能從上到下，若需要橫向則需要旋轉90°
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.5; color: "white" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }
}
 

•   radius: real [圓角半徑]

Item {
    Rectangle {
        id: rect1;
        width: 200;
        height: 200;
        radius: width/2;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white"; }
            GradientStop { position: 0.5; color: "blue"; }
            GradientStop { position: 1.0; color: "white"; }
        }
        border.width: 5;
        border.color: "black";
    }
}
 

Image

描述

        影象型別顯示影象。

屬性

• : bool [指定本地檔案系統上的影象應在單獨的執行緒中非同步載入。預設值為false，導致使用者介面執行緒在載入影象時阻塞。將非同步設定為true對保持響應性使用者介面比立即可見影象更可取] （注意：此屬性只對從本地檔案系統讀取的影象有效。通過網路資源（例如HTTP）載入的影象總是非同步載入。）
• cache : bool [指定是否應快取影象。預設值為true。在處理大型影象時，將快取設定為false是很有用的，以確保它們不會以犧牲小UI元素的影象為代價進行快取]
• fillMode : enumeration [設定此屬性以定義源影象的大小與本元素Image不同時發生的情況]

Image.Stretch           - the image is scaled to fit
Image.PreserveAspectFit  - the image is scaled uniformly to fit without cropping
Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary
Image.Tile               - the image is duplicated horizontally and vertically
Image.TileVertically       - the image is stretched horizontally and tiled vertically
Image.TileHorizontally     - the image is stretched vertically and tiled horizontally
Image.Pad               - the image is not transformed

示例

Item {
    Rectangle {
        width: 1000; height: 600;
        color: "skyblue";
        Image {
            source: "1.png"
        }

        Image {
            x:300;
            width: 130; height: 100
            source: "1.png"
        }
        Image {
            x:450;
            width: 130; height: 100
            fillMode: Image.PreserveAspectFit
            source: "1.png"
        }
        Image {
            x:600;
            width: 130; height: 100
            fillMode: Image.PreserveAspectCrop
            source: "1.png"
            clip: true
        }
        Image {
            x:300; y:200;
            width: 120; height: 120
            fillMode: Image.Tile
            horizontalAlignment: Image.AlignLeft
            verticalAlignment: Image.AlignTop
            source: "1.png"
        }
        Image {
            x:450; y:200;
            width: 120; height: 120
            fillMode: Image.TileVertically
            verticalAlignment: Image.AlignTop
            source: "1.png"
        }
        Image {
            x:600; y:200;
            width: 120; height: 120
            fillMode: Image.TileHorizontally
            verticalAlignment: Image.AlignLeft
            source: "1.png"
        }
    }
}

當圖片較大時：
當圖片較小時：

• horizontalAlignment : enumeration[設定影象的水平對齊，預設是center，圖片拉伸了或者做了fillmode]

Item {
    Image {
        source: "1.png"
    }
    Image {
        x:0; y:150;
        width: 120; height: 120
        fillMode: Image.Tile
        horizontalAlignment: Image.AlignRight
        verticalAlignment: Image.AlignTop
        source: "1.png"
    }
    Image {
        x:450; y:150;
        width: 120; height: 120
        fillMode: Image.TileVertically // 垂直排列（寬度fit）
        verticalAlignment: Image.AlignTop
        source: "1.png"
    }
    Image {
        x:900; y:150;
        width: 120; height: 120
        fillMode: Image.TileHorizontally; // 水平排列（高度fit）
        verticalAlignment: Image.AlignLeft
        source: "1.png"
    }
}

• mirror : bool [rotation為0度時，以縱軸為軸心，做映象，預設false]

Item {
    Rectangle {
        width: 1000; height: 600;
        color: "skyblue";
        Image {
            width: 200; height: 200;
            horizontalAlignment: Image.AlignRight;
            source: "1.png";
        }
        Image {
            x: 250; width: 200; height: 200;
            horizontalAlignment: Image.AlignRight;
            source: "1.png";
            mirror: true; // 橫向映象
        }
        Image {
            x: 500; width: 200; height: 200;
            horizontalAlignment: Image.AlignRight;
            source: "1.png";
            mirror: true; // 橫向映象
            rotation: 90;
        }
    }
}

• paintedHeight : real [這些屬性保持實際繪製的影象的大小。在大多數情況下，它是寬度和高度相同，但使用的填充模式PreserveAspectFit(按照比例進行寬度匹配）或填充模式PreserveAspectCrop（按照比例進行高度匹配）時，paintedwidth或paintedheight可小於或大於影象專案的寬度和高度

• paintedWidth : real [同paintedHeight]

• progress : real [這個屬性儲存影象的載入進度，從0（無負載）到1（完成）]

•  : bool [此屬性儲存縮放或轉換時影象是否平滑地過濾。平滑過濾提供了更好的視覺質量，但在某些硬體上可能會慢一些。如果影象以自然大小（本身大小）顯示，則此屬性沒有視覺效果或效能效果。預設情況下，此屬性設定為true]

• source : url [映像可以處理Qt支援的任何影象格式，它由Qt支援的任何URL方案載入。URL可能是絕對的，或者與元件的URL相對]

• sourceSize：QSize [此屬性包含載入影象的實際寬度和高度。與寬度和高度縮放的屬性不同，此屬性設定儲存的影象的實際畫素數，以便大影象不使用比必要的更多記憶體]

下面的例子，這保證了影象在記憶體不大於1024x1024畫素，無論影象的寬度和高度值是多少：

Rectangle {
    width: ...
    height: ...
    Image {
       anchors.fill: parent
       source: "1.jpg"
       sourceSize.width: 1024
       sourceSize.height: 1024
    }
}

1. 如果影象的實際尺寸大於sourcesize，影象縮小。如果尺寸的一個維度設定為大於0，則另一個維度按比例設定以保持源影象的長寬比。（的填充模式是獨立的。）
2. 如果雙方的sourcesize.width和sourcesize.height設定影象將被縮小到符合指定的大小，保持影象的縱橫比。縮放後實際大小的影象尺寸可通過item::implicitheight和item:: implicitwidth控制。
3. 如果source是一個本質上可伸縮的影象（例如SVG），那麼這個屬性決定了載入影象的大小，而不管其固有大小。避免動態更改此屬性；呈現SVG比影象慢。
4. 如果source是一個不可縮放的影象（例如JPEG），載入的影象將不會大於這個屬性指定。對於某些格式（目前只有JPEG），整個影象實際上永遠不會載入到記憶體中。

可清除影象的sourcesize自然大小，設定sourceSize為undefined即可。

• status : enumeration [這個屬性儲存影象的載入狀態]

Image.Null    - no image has been set
Image.Ready  - the image has been loaded
Image.Loading - the image is currently being loaded
Image.Error   - an error occurred while loading the image

示例程式碼

Rectangle {
    Image {
       source: "1.png";
       State { name: 'loaded'; when: image.status == Image.Ready }
       id: image
           onStatusChanged:
               if (image.status == Image.Ready) {
                   console.log('Loaded');
               }
       Text {
           text: image.status == Image.Ready ? 'Loaded' : 'Not loaded';
           y:100
       }
    }
}

• verticalAlignment : enumeration [設定影象的水平對齊，預設是center，圖片拉伸了或者做了fillMode，參照上面的horizontalAlignment ]