Rectangle類型

對于最基本的可視化效果，Qt Quick提供了一個 類型來繪制矩形，這些矩形可以用顏色或垂直漸變著色，Rectangle 類型還可以在矩形上繪制邊框。

要繪制矩形以外的自定義形狀，請參閱類型或使用 類型顯示預渲染圖像。

import QtQuick

Item {

width: 320
height: 480

Rectangle {
color: "#272822"
width: 320
height: 480
}

// This element displays a rectangle with a gradient and a border
Rectangle {
x: 160
y: 20
width: 100
height: 100
radius: 8 // This gives rounded corners to the Rectangle
gradient: Gradient { // This sets a vertical gradient fill
GradientStop { position: 0.0; color: "aqua" }
GradientStop { position: 1.0; color: "teal" }
}
border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
}

// This rectangle is a plain color with no border
Rectangle {
x: 40
y: 20
width: 100
height: 100
color: "red"
}
}

Image類型

Qt Quick提供了一個Image類型，可用于顯示圖像。 Image類型有一個source屬性，其值可以是遠程或本地URL，或者嵌入在編譯資源文件中的圖像文件的URL。

// This element displays an image. Because the source is online, it may take some time to fetch
Image {
x: 40
y: 20
width: 61
height: 73
source: "http://codereview.qt-project.org/static/logo_qt.png"
}

對于更復雜的圖像，還有其他類似于Image的類型。 BorderImage繪制帶有網格縮放的圖像，適用于用作邊框的圖像。 AnimatedImage播放動畫 .gif 和 .mng 圖像。 AnimatedSprite和 SpriteSequence播放由以非動畫圖像格式相鄰存儲的多個幀組成的動畫。

共享可視化屬性

Qt Quick提供的所有可視項都基于 Item 類型，它為可視項提供了一組通用的屬性，包括不透明度和變換屬性。

不透明度和可見性

Qt Quick提供的QML對象類型內置了對不透明度的支持，可以對不透明度進行動畫處理，以允許平滑過渡到透明狀態或從透明狀態平滑過渡。 也可以使用可見屬性更有效地管理可見性，但代價是無法對其進行動畫處理。

import QtQuick

Item {

width: 320
height: 480

Rectangle {
color: "#272822"
width: 320
height: 480
}

Item {
x: 20
y: 270
width: 200
height: 200
MouseArea {
anchors.fill: parent
onClicked: topRect.visible = !topRect.visible
}
Rectangle {
x: 20
y: 20
width: 100
height: 100
color: "red"
}
Rectangle {
id: topRect
opacity: 0.5

x: 100
y: 100
width: 100
height: 100
color: "blue"
}
}
}

轉換

Qt Quick類型具有對轉換的內置支持，如果您希望旋轉或縮放可視化內容，您可以設置Item::rotation或Item::scale屬性，這些也可以是動畫。

import QtQuick

Item {

width: 320
height: 480

Rectangle {
color: "#272822"
width: 320
height: 480
}

Rectangle {
rotation: 45 // This rotates the Rectangle by 45 degrees
x: 20
y: 160
width: 100
height: 100
color: "blue"
}
Rectangle {
scale: 0.8 // This scales the Rectangle down to 80% size
x: 160
y: 160
width: 100
height: 100
color: "green"
}
}

Qt商用組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網格組件：提供了一套完整的標準 QTableView 函數和傳統組件無法實現的獨特功能。使您能夠將不同來源的各類數據加載到一個快速、靈活且功能強大的可編輯網格中，支持排序、分組、報告、創建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 組件是一組 GUI 控件，它實現了菜單、導航框、命令欄等導航界面，并讓您以更少的滾動和點擊次數有效地查看所有實體（工作區、網格或其他項目）。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍色調色板完全支持 Visual Studio 2019 主題！

Qt技術交流群4：166830288      歡迎一起進群討論