鴻蒙HarmonyOS ArkUI（eTS）組件通信方式總結(jié)之一：@State

鴻蒙HarmonyOS ArkUI（eTS）組件間通信涉及組件屬性與顯示、父子組件間通信、祖孫組件間通信、不相干組件間通信等，而組件兩兩間通信也有單向與雙向之分。通過學(xué)習(xí)HDC2021和官方文檔，本系列以@State、@Link、@Prop、@Provide與@Consume、@StorageLink等組件狀態(tài)裝飾器介紹組件間通信方式。

公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出合作免費(fèi)做網(wǎng)站回饋大家。

本次介紹：@State。

組件其實(shí)是一個(gè)結(jié)構(gòu)體，它有屬性、有方法，用build方法描述UI。@State裝飾組件的狀態(tài)屬性，當(dāng)@State裝飾的變量變化時(shí)，組件會(huì)重新渲染更新UI。

代碼如下：

當(dāng)點(diǎn)擊“加1”按鈕時(shí)，Text標(biāo)簽的數(shù)字會(huì)加1顯示，即myVal通過button點(diǎn)擊事件改變了值，并顯示在Text上。

注意事項(xiàng)：標(biāo)記為@State的屬性是私有變量，只能在組件內(nèi)訪問；必須為@State變量分配初始值。

鴻蒙開發(fā)之如何創(chuàng)建Button按鈕 （HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí)）

按鈕（Button）是一種常見的組件，點(diǎn)擊可以觸發(fā)對(duì)應(yīng)的操作，通常由文本或圖標(biāo)組成，也可以由圖標(biāo)和文本共同組成。

使用Button組件，可以生成形狀、顏色豐富的按鈕。

群名稱：harmonyos鴻蒙技術(shù)交流

群 號(hào)：856567895

「鴻蒙開發(fā) 3」華為鴻蒙應(yīng)用開發(fā)的低代碼（Super Visual）開發(fā)方式

開發(fā)前可以了解下鴻蒙： [鴻蒙開發(fā) 序]華為鴻蒙操作系統(tǒng)（HarmonyOS）簡介及開發(fā)環(huán)境搭建

開發(fā)前的準(zhǔn)備：「鴻蒙開發(fā) 1」華為鴻蒙應(yīng)用集成開發(fā)環(huán)境DevEco Studio安裝和設(shè)置

了解鴻蒙應(yīng)用開發(fā)的基本開發(fā)流程：「鴻蒙開發(fā) 2」第一個(gè)華為鴻蒙（HarmonyOS）應(yīng)用程序（App）

本章目標(biāo)：

1 了解華為鴻蒙應(yīng)用開發(fā)的可視化（低代碼）方式

2 通過構(gòu)建一個(gè)簡單的具有頁面跳轉(zhuǎn)功能的應(yīng)用

低代碼開發(fā)方式，即通過可視化界面開發(fā)方式快速構(gòu)建布局、編輯UI界面，可有效降低用戶的上手成本并提升用戶構(gòu)建UI界面的效率。

1 打開DevEco Studio，創(chuàng)建一個(gè)新工程，選擇支持Phone / Tablet / Wearable（手機(jī) / 平板 / s可穿戴）的模板，我們?cè)诖酥苯舆x擇Empty Ability

Project name工程名稱填SuperVisual

Development mode開發(fā)方式選擇Super Visual

其它的可以使用默認(rèn)設(shè)置，點(diǎn)擊完成，進(jìn)入編輯界面

1 在Project（項(xiàng)目）窗口，刪除工程運(yùn)行默認(rèn)的入口文件夾：“entry src main js default pages index”文件夾

2 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標(biāo)右鍵，選擇“New JS Visual”

JS visual name填first，點(diǎn)擊完成，進(jìn)入編輯界面

創(chuàng)建完成后，可以看到“entry src main supervisual default pages page page.visual”的文件目錄結(jié)構(gòu)

3 第一個(gè)頁面內(nèi)有一個(gè)容器、文本和一個(gè)按鈕，通過Div、Text和Button組件來實(shí)現(xiàn)

（1）分別選中first.visual畫面中的Text、Div組件，單擊鼠標(biāo)右鍵，選擇Delete刪除

（2）選中UI Control中的Div組件，將其拖至畫布

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置Div組件的高度Height為100%，使其占滿屏幕

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Flex），設(shè)置Div組件的FlexDirection樣式為column，使Div的主軸垂直；設(shè)置Div組件的JustifyContent樣式為center，使得其子組件在主軸上居中顯示；設(shè)置Div組件的AlignItems樣式為center，使得其子組件在交叉軸上居中顯示

（3）選中UI Control中的Text組件，將其拖至Div組件的中央?yún)^(qū)域

點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Text組件的Content屬性為 “ Hello World ”

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置Text組件的寬（width）為100%，高（height）為100px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為60px，使得其文字放大；設(shè)置組件的TextAlign樣式為center，使得組件文字居中顯示

（4）選中UI Control中的Button組件，將其拖至Text組件下面

點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Button組件的Value屬性為 “ Next ”，

點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)（General），設(shè)置按的寬（width）為40%，高（height）為60px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為40px

至此，第一個(gè)頁面創(chuàng)建完成

我們可以在預(yù)覽窗口中看效果，點(diǎn)擊右側(cè)邊欄的Preview打開預(yù)覽窗口

1 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標(biāo)右鍵，選擇“New JS Visual”

Visual配置界面，JS visual name填second，回車（Enter鍵）或者點(diǎn)擊完成，進(jìn)入編輯界面

2 第二個(gè)頁面中有一個(gè)容器和文本，通過Div、Text組件實(shí)現(xiàn)，現(xiàn)在編輯器已經(jīng)為我們創(chuàng)建好了，我們就來修改下它們的屬性（你也可以刪除原有的自己創(chuàng)建，具體步驟參考本章第二節(jié)“二 創(chuàng)建第一個(gè)頁面”）。

選中Text組件，點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)（Properties），設(shè)置Text組件的Content屬性為 “ Hi，I'm always here. ”

點(diǎn)擊右側(cè)屬性樣式欄中的通用圖標(biāo)（General），設(shè)置組件的寬（width）為100%，高為60px

點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)（Feature），設(shè)置組件的FontSize樣式為36px，TextAlign樣式為center

這樣我們的第二個(gè)頁面創(chuàng)建成功了

1 在Project窗口，打開工程中的“entry src main js default pages first first.js”， 導(dǎo)入router模塊，頁面路由router根據(jù)頁面的uri來找到目標(biāo)頁面，從而實(shí)現(xiàn)跳轉(zhuǎn)。示例代碼如下：

2 打開或者切換到first.visual頁面，選中畫布上的Button組件，點(diǎn)擊右側(cè)屬性樣式欄中的事件圖標(biāo)（Events），鼠標(biāo)點(diǎn)擊Click事件的輸入框，選擇launch事件

3 在預(yù)覽窗口中查看項(xiàng)目效果，點(diǎn)擊Next按鈕后發(fā)現(xiàn)我們的頁面成功跳轉(zhuǎn)了。

到此，本章的目標(biāo)就完成了。

零基礎(chǔ)學(xué)鴻蒙編程-匯總篇

如何安裝鴻蒙開發(fā)工具-DevEco Studio

鴻蒙開發(fā)工具(DevEco Studio)漢化版

第一個(gè)鴻蒙工程-Java版（含模擬器創(chuàng)建）

零基礎(chǔ)學(xué)鴻蒙-UI控件_Text

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_TextField

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_Button

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_Image

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_Switch

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_RadioButton

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_CheckBox

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_ToggleButton

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_DatePicker

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_TimePicker

零基礎(chǔ)學(xué)鴻蒙編程-常用工具_(dá)Toast

零基礎(chǔ)學(xué)鴻蒙編程-常用工具_(dá)HiLog

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_TabList

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_ListContainer

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_ProgressBar

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_PageFlipper

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_Slider

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_StackLayout

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_TableLayout

零基礎(chǔ)學(xué)鴻蒙編程-UI控件_StackLayout

零基礎(chǔ)學(xué)鴻蒙編程-運(yùn)行時(shí)權(quán)限

零基礎(chǔ)學(xué)鴻蒙編程-關(guān)系數(shù)據(jù)庫

零基礎(chǔ)學(xué)鴻蒙編程-網(wǎng)絡(luò)請(qǐng)求

網(wǎng)站標(biāo)題：鴻蒙開發(fā)button組件,鴻蒙微信組件
文章路徑：http://www.rwnh.cn/article18/phpedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)