當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >Qt編程進(jìn)階: 創(chuàng)造流動(dòng)的UI界面

Qt編程進(jìn)階: 創(chuàng)造流動(dòng)的UI界面

發(fā)布時(shí)間：2024-08-18 11:42:45 瀏覽量：376次

想要打造具有動(dòng)畫(huà)效果的流動(dòng)UI界面嗎？只需妙用QML的動(dòng)畫(huà)元素，你就能以連續(xù)變化的形式呈現(xiàn)出UI界面上的元素。在Qt Quick中，有幾種簡(jiǎn)便的方法可以實(shí)現(xiàn)這一目標(biāo)，其中包括狀態(tài)切換機(jī)制和設(shè)計(jì)組合動(dòng)畫(huà)。

狀態(tài)和切換

Qt Quick允許用戶通過(guò)State對(duì)象聲明各種不同的UI狀態(tài)。這些狀態(tài)是由基礎(chǔ)狀態(tài)的屬性改變（PropertyChanges元素）組成，是一種有效的方式來(lái)組織UI界面邏輯。切換是與元素相關(guān)聯(lián)的對(duì)象，定義了當(dāng)元素狀態(tài)改變時(shí)屬性的動(dòng)畫(huà)呈現(xiàn)方式。

下面是一個(gè)實(shí)例，使用狀態(tài)切換機(jī)制實(shí)現(xiàn)文字的動(dòng)態(tài)增強(qiáng)顯示效果。當(dāng)鼠標(biāo)選中單詞時(shí)，文字會(huì)以藝術(shù)字放大，釋放鼠標(biāo)后恢復(fù)原狀。具體步驟如下：

新建項(xiàng)目

在QML應(yīng)用程序中新建項(xiàng)目，命名為“StateTransition”。

自定義元素

右擊項(xiàng)目資源中的“qml.qrc”下的“/”節(jié)點(diǎn)，新建“StateText.qml”文件，并編寫(xiě)代碼。

import QtQuick 2.0Text {  id: stext  color: "grey"  font.family: "Helvetica"  font.pointSize: 12  font.bold: true  MouseArea {    id: mArea    anchors.fill: parent    }  states: [    State {      name: "highlight"      when: mArea.pressed      PropertyChanges {        target: stext        color: "red"        font.pointSize: 25        style: Text.Raised        styleColor: "red"      }    }  ]  transitions: [    Transition {      PropertyAnimation {        duration: 1000      }    }  ]}

細(xì)節(jié)解釋：

(a) states: 定義元素的不同狀態(tài)，每個(gè)State對(duì)象代表一個(gè)狀態(tài)變化。
(b) State {}: 狀態(tài)對(duì)象，定義在該狀態(tài)下屬性的改變，可以使用PropertyChanges元素，也可以修改其他對(duì)象的屬性。
(c) name: "highlight"，狀態(tài)名稱，用于標(biāo)識(shí)不同狀態(tài)。
(d) when: mArea.pressed，當(dāng)鼠標(biāo)按下時(shí)進(jìn)入該狀態(tài)，釋放鼠標(biāo)則返回默認(rèn)狀態(tài)。

編寫(xiě)主程序

打開(kāi)“main.qml”文件，并編寫(xiě)以下代碼：

import QtQuick 2.12import QtQuick.Window 2.12Window {  width: 320  height: 240  visible: true  title: qsTr("StateTransition")  Rectangle {    width: 360    height: 360    anchors.fill: parent    Row {      anchors.centerIn: parent      spacing: 10      StateText { text: "I" }      StateText { text: "love" }      StateText { text: "QML" }    }  }}

覺(jué)得有用的話請(qǐng)關(guān)注點(diǎn)贊，謝謝您的支持！如果您對(duì)本系列文章的示例代碼有興趣，歡迎關(guān)注并在評(píng)論區(qū)留言！

想要了解更多關(guān)于數(shù)字藝術(shù)教育的信息嗎？歡迎點(diǎn)擊點(diǎn)擊咨詢學(xué)習(xí)游戲設(shè)計(jì)、動(dòng)畫(huà)制作、UI設(shè)計(jì)等課程。

上一篇北師大未來(lái)設(shè)計(jì)學(xué)院在第六屆中國(guó)教博會(huì)發(fā)布五項(xiàng)PBL大挑戰(zhàn)項(xiàng)目

下一篇這些UI設(shè)計(jì)新潮流，能夠成為主流趨勢(shì)嗎？快來(lái)看看吧！

亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

Qt編程進(jìn)階: 創(chuàng)造流動(dòng)的UI界面

狀態(tài)和切換

新建項(xiàng)目

自定義元素

編寫(xiě)主程序

請(qǐng)綁定手機(jī)號(hào)