Rectangle類(lèi)型

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

要繪制矩形以外的自定義形狀，請(qǐng)參閱類(lèi)型或使用 類(lèi)型顯示預(yù)渲染圖像。

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類(lèi)型

Qt Quick提供了一個(gè)Image類(lèi)型，可用于顯示圖像。 Image類(lèi)型有一個(gè)source屬性，其值可以是遠(yuǎn)程或本地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"
}

對(duì)于更復(fù)雜的圖像，還有其他類(lèi)似于Image的類(lèi)型。 BorderImage繪制帶有網(wǎng)格縮放的圖像，適用于用作邊框的圖像。 AnimatedImage播放動(dòng)畫(huà) .gif 和 .mng 圖像。 AnimatedSprite和 SpriteSequence播放由以非動(dòng)畫(huà)圖像格式相鄰存儲(chǔ)的多個(gè)幀組成的動(dòng)畫(huà)。

共享可視化屬性

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

不透明度和可見(jiàn)性

Qt Quick提供的QML對(duì)象類(lèi)型內(nèi)置了對(duì)不透明度的支持，可以對(duì)不透明度進(jìn)行動(dòng)畫(huà)處理，以允許平滑過(guò)渡到透明狀態(tài)或從透明狀態(tài)平滑過(guò)渡。 也可以使用可見(jiàn)屬性更有效地管理可見(jiàn)性，但代價(jià)是無(wú)法對(duì)其進(jìn)行動(dòng)畫(huà)處理。

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"
}
}
}

轉(zhuǎn)換

Qt Quick類(lèi)型具有對(duì)轉(zhuǎn)換的內(nèi)置支持，如果您希望旋轉(zhuǎn)或縮放可視化內(nèi)容，您可以設(shè)置Item::rotation或Item::scale屬性，這些也可以是動(dòng)畫(huà)。

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技術(shù)的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類(lèi)圖表組件：是一個(gè)C ++庫(kù)，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網(wǎng)格組件：提供了一套完整的標(biāo)準(zhǔn) QTableView 函數(shù)和傳統(tǒng)組件無(wú)法實(shí)現(xiàn)的獨(dú)特功能。使您能夠?qū)⒉煌瑏?lái)源的各類(lèi)數(shù)據(jù)加載到一個(gè)快速、靈活且功能強(qiáng)大的可編輯網(wǎng)格中，支持排序、分組、報(bào)告、創(chuàng)建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 組件是一組 GUI 控件，它實(shí)現(xiàn)了菜單、導(dǎo)航框、命令欄等導(dǎo)航界面，并讓您以更少的滾動(dòng)和點(diǎn)擊次數(shù)有效地查看所有實(shí)體（工作區(qū)、網(wǎng)格或其他項(xiàng)目）。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應(yīng)用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍(lán)色調(diào)色板完全支持 Visual Studio 2019 主題！

Qt技術(shù)交流群4：166830288      歡迎一起進(jìn)群討論