鴻蒙HarmonyOS ArkUI（eTS）組件間通信涉及組件屬性與顯示、父子組件間通信、祖孫組件間通信、不相干組件間通信等，而組件兩兩間通信也有單向與雙向之分。通過學習HDC2021和官方文檔，本系列以@State、@Link、@Prop、@Provide與@Consume、@StorageLink等組件狀態(tài)裝飾器介紹組件間通信方式。
公司主營業(yè)務：成都網(wǎng)站制作、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出合作免費做網(wǎng)站回饋大家。
本次介紹：@State。
組件其實是一個結構體，它有屬性、有方法，用build方法描述UI。@State裝飾組件的狀態(tài)屬性，當@State裝飾的變量變化時，組件會重新渲染更新UI。
代碼如下：
當點擊“加1”按鈕時，Text標簽的數(shù)字會加1顯示，即myVal通過button點擊事件改變了值，并顯示在Text上。
注意事項：標記為@State的屬性是私有變量，只能在組件內(nèi)訪問；必須為@State變量分配初始值。
按鈕（Button）是一種常見的組件，點擊可以觸發(fā)對應的操作，通常由文本或圖標組成，也可以由圖標和文本共同組成。
使用Button組件，可以生成形狀、顏色豐富的按鈕。
群名稱：harmonyos鴻蒙技術交流
群 號：856567895
開發(fā)前可以了解下鴻蒙： [鴻蒙開發(fā) 序]華為鴻蒙操作系統(tǒng)（HarmonyOS）簡介及開發(fā)環(huán)境搭建
開發(fā)前的準備：「鴻蒙開發(fā) 1」華為鴻蒙應用集成開發(fā)環(huán)境DevEco Studio安裝和設置
了解鴻蒙應用開發(fā)的基本開發(fā)流程：「鴻蒙開發(fā) 2」第一個華為鴻蒙（HarmonyOS）應用程序（App）
本章目標：
1 了解華為鴻蒙應用開發(fā)的可視化（低代碼）方式
2 通過構建一個簡單的具有頁面跳轉功能的應用
低代碼開發(fā)方式，即通過可視化界面開發(fā)方式快速構建布局、編輯UI界面，可有效降低用戶的上手成本并提升用戶構建UI界面的效率。
1 打開DevEco Studio，創(chuàng)建一個新工程，選擇支持Phone / Tablet / Wearable（手機 / 平板 / s可穿戴）的模板，我們在此直接選擇Empty Ability
Project name工程名稱填SuperVisual
Development mode開發(fā)方式選擇Super Visual
其它的可以使用默認設置，點擊完成，進入編輯界面
1 在Project（項目）窗口，刪除工程運行默認的入口文件夾：“entry src main js default pages index”文件夾
2 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標右鍵，選擇“New JS Visual”
JS visual name填first，點擊完成，進入編輯界面
創(chuàng)建完成后，可以看到“entry src main supervisual default pages page page.visual”的文件目錄結構
3 第一個頁面內(nèi)有一個容器、文本和一個按鈕，通過Div、Text和Button組件來實現(xiàn)
（1）分別選中first.visual畫面中的Text、Div組件，單擊鼠標右鍵，選擇Delete刪除
（2）選中UI Control中的Div組件，將其拖至畫布
點擊右側屬性樣式欄中的通用樣式圖標（General），設置Div組件的高度Height為100%，使其占滿屏幕
點擊右側屬性樣式欄中的樣式圖標（Flex），設置Div組件的FlexDirection樣式為column，使Div的主軸垂直；設置Div組件的JustifyContent樣式為center，使得其子組件在主軸上居中顯示；設置Div組件的AlignItems樣式為center，使得其子組件在交叉軸上居中顯示
（3）選中UI Control中的Text組件，將其拖至Div組件的中央?yún)^(qū)域
點擊右側屬性樣式欄中的屬性圖標（Properties），設置Text組件的Content屬性為 “ Hello World ”
點擊右側屬性樣式欄中的通用樣式圖標（General），設置Text組件的寬（width）為100%，高（height）為100px
點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為60px，使得其文字放大；設置組件的TextAlign樣式為center，使得組件文字居中顯示
（4）選中UI Control中的Button組件，將其拖至Text組件下面
點擊右側屬性樣式欄中的屬性圖標（Properties），設置Button組件的Value屬性為 “ Next ”，
點擊右側屬性樣式欄中的通用樣式圖標（General），設置按的寬（width）為40%，高（height）為60px
點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為40px
至此，第一個頁面創(chuàng)建完成
我們可以在預覽窗口中看效果，點擊右側邊欄的Preview打開預覽窗口
1 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標右鍵，選擇“New JS Visual”
Visual配置界面，JS visual name填second，回車（Enter鍵）或者點擊完成，進入編輯界面
2 第二個頁面中有一個容器和文本，通過Div、Text組件實現(xiàn)，現(xiàn)在編輯器已經(jīng)為我們創(chuàng)建好了，我們就來修改下它們的屬性（你也可以刪除原有的自己創(chuàng)建，具體步驟參考本章第二節(jié)“二 創(chuàng)建第一個頁面”）。
選中Text組件，點擊右側屬性樣式欄中的屬性圖標（Properties），設置Text組件的Content屬性為 “ Hi，I'm always here. ”
點擊右側屬性樣式欄中的通用圖標（General），設置組件的寬（width）為100%，高為60px
點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為36px，TextAlign樣式為center
這樣我們的第二個頁面創(chuàng)建成功了
1 在Project窗口，打開工程中的“entry src main js default pages first first.js”， 導入router模塊，頁面路由router根據(jù)頁面的uri來找到目標頁面，從而實現(xiàn)跳轉。示例代碼如下：
2 打開或者切換到first.visual頁面，選中畫布上的Button組件，點擊右側屬性樣式欄中的事件圖標（Events），鼠標點擊Click事件的輸入框，選擇launch事件
3 在預覽窗口中查看項目效果，點擊Next按鈕后發(fā)現(xiàn)我們的頁面成功跳轉了。
到此，本章的目標就完成了。
如何安裝鴻蒙開發(fā)工具-DevEco Studio
鴻蒙開發(fā)工具(DevEco Studio)漢化版
第一個鴻蒙工程-Java版（含模擬器創(chuàng)建）
零基礎學鴻蒙-UI控件_Text
零基礎學鴻蒙編程-UI控件_TextField
零基礎學鴻蒙編程-UI控件_Button
零基礎學鴻蒙編程-UI控件_Image
零基礎學鴻蒙編程-UI控件_Switch
零基礎學鴻蒙編程-UI控件_RadioButton
零基礎學鴻蒙編程-UI控件_CheckBox
零基礎學鴻蒙編程-UI控件_ToggleButton
零基礎學鴻蒙編程-UI控件_DatePicker
零基礎學鴻蒙編程-UI控件_TimePicker
零基礎學鴻蒙編程-常用工具_Toast
零基礎學鴻蒙編程-常用工具_HiLog
零基礎學鴻蒙編程-UI控件_TabList
零基礎學鴻蒙編程-UI控件_ListContainer
零基礎學鴻蒙編程-UI控件_ProgressBar
零基礎學鴻蒙編程-UI控件_PageFlipper
零基礎學鴻蒙編程-UI控件_Slider
零基礎學鴻蒙編程-UI控件_StackLayout
零基礎學鴻蒙編程-UI控件_TableLayout
零基礎學鴻蒙編程-UI控件_StackLayout
零基礎學鴻蒙編程-運行時權限
零基礎學鴻蒙編程-關系數(shù)據(jù)庫
零基礎學鴻蒙編程-網(wǎng)絡請求
重慶分公司
重慶分公司
