激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

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

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

想要打造具有動(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ù)原狀。具體步驟如下：

狀態(tài)切換機(jī)制示例

新建項(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ì)等課程。

熱門(mén)課程推薦

熱門(mén)資訊

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

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定