ArkUI_eTS手把手入門（附eTS組件指導文檔地址）
原創??https://harmonyos.51cto.com??
一、開發前準備
工欲善其事，必先利其器。我們要先準備好相關開發環境。
(可能大部分開發者已經準備好了開發環境，此處只做概述)
1.DevEco Studio下載安裝
2.預覽eTS相關組件指導文檔
??openharmony基于TS擴展的聲明式開發范式 指導文檔地址??
二、新建工程
1.基本步驟
打開DevEco Studio,按照下圖 “File > New > New Project…” 步驟新建工程。
選擇相應工程選項并點擊“Next”。
2.完成工程相關配置
如，工程命名、開發語言選擇(我們選擇eTS即可)、API版本等。
三、正式開發
1.查看工程目錄結構并預覽運行結果
我們寫UI界面的主要文件為“··· > entry > src > main > ets > default > pages > ···.ets”。
如果要增加頁面，如下圖。鼠標移動到“pages”右擊，“> New > eTS Page”單擊并為新增界面命名即可。
使用預覽器預覽結果界面，如下圖結果正常，則證明環境已沒有問題。
2.代碼分析
上面創建工程后，頁面僅顯示“Hello World”文本。我們下面要做的就是基于openharmony基于TS擴展的聲明式開發范式 指導文檔 進行相關UI界面設計。
通過下圖，不難看出我們之前使用到的就是指導文檔中的 Flex容器組件 和 Text組件
那么我們可以根據指導文檔提供的組件進行更多開發。
3.代碼編寫
在我們能夠讀懂開發文檔的基礎上，繼續添加更多組件。由于是入門，本貼只做個別組件詳細講解。
(1).Text組件
參考：??Text組件文檔??
接口： Text(content?: string)
我們從接口參數可知，Text組件只有一個文本內容的string參數，也就是我們上面的所看到的"Hello world"文本信息。
而后面的.width().height()等關鍵詞是其相關屬性。我們可以舉出以下例子：
Text('Hello World dddddddddddddddd')
//設置文本對齊方式
.textAlign(TextAlign.Center)
//設置文本最大行數，是設置文本超長顯示方式的基礎條件
.maxLines(1)
//設置文本超長時的顯示方式（None/Clip/Ellipsis）
.textOverflow({overflow:TextOverflow.Ellipsis})
//設置文本行高
.lineHeight('100')
//設置文本裝飾線樣式以及顏色，此代碼樣式為:下劃線、紅色
.decoration({type:TextDecorationType.Underline,color:Color.Red})
//距離本行下邊框距離，術語:文本基線的偏移量
.baselineOffset('10')
//設置文本大小寫，無論原內容如何都將統一為此處所配置樣式
.textCase(TextCase.UpperCase)
//設置文字大小
.fontSize(20)
//字體粗細
.fontWeight(FontWeight.Bold) 上述代碼，運行結果如下：
(2).Button組件
參考：??Button組件文檔??
接口1： Button(options?: {type?: ButtonType, stateEffect?: boolean})
接口2： Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
首先我們利用接口1來測試主要的屬性：
//第一種類型---無文字圓形按鈕
//type:按鈕形狀類型（按鈕風格）
Button({type:ButtonType.Circle})
.width('50')
.height('50')
//按鈕圓角
.borderRadius(10)
//設置按鈕背景顏色，默認藍色
.backgroundColor('#000')
//按鈕邊框
.border({width:1})
//按鈕邊框顏色
.borderColor('#0AFF00')
//距離左邊距離
.margin({left:100})
//點擊事件
.onClick((event: ClickEvent)=>{
AlertDialog.show({title:'點擊事件',message:'點擊了一下'})
})
上述按鈕效果如下：
接下來，我們用接口2測試兩個接口的不同使用方法：
//第二種類型---有文字方形按鈕
//按鈕文字可直接在接口中寫出，也在Button中嵌套Text組件使用
//1、直接在接口寫,接口2中的“label”屬性
Button('按鈕1',{type:ButtonType.Normal})
.width(90)
.height(40)
//為了使此按鈕與上方按鈕區分開，可設置其上邊距
.margin({top:20})
//2、嵌套Text組件
Button({type:ButtonType.Normal}){
//可自己設置文字樣式
Text('按鈕2').fontSize(16).fontColor('#FFF')
}
.width(90)
.height(40)
.margin({top:20})
上述代碼，展示效果如下：
四、本次分享總結
感想總結
本次分享帶領想要學習ArkUI_eTS的朋友手把手入門。也是本人學習過程中總結出來的一些關鍵知識。可能還有很多知識點沒有列舉出來，但我認為只要掌握了讀文檔的技巧，相信每位朋友都可以很快的成為ArkUI開發者。在沒有找到openharmony基于TS擴展的聲明式開發范式 指導文檔的時候我也是對ArkUI一頭霧水,最后希望大家都能夠掌握讀指導文檔的技能。
附上本次分享的所有代碼：
@Entry
@Component
struct Index {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Hello World dddddddddddddddd')
//設置文本對齊方式
.textAlign(TextAlign.Center)
//設置文本最大行數，是設置文本超長顯示方式的基礎條件
.maxLines(1)
//設置文本超長時的顯示方式（None/Clip/Ellipsis）
.textOverflow({overflow:TextOverflow.Ellipsis})
//設置文本行高
.lineHeight('100')
//設置文本裝飾線樣式以及顏色，此代碼樣式為:下劃線、紅色
.decoration({type:TextDecorationType.Underline,color:Color.Red})
//距離本行下邊框距離，術語:文本基線的偏移量
.baselineOffset('10')
//設置文本大小寫，無論原內容如何都將統一為此處所配置樣式
.textCase(TextCase.UpperCase)
//設置文字大小
.fontSize(20)
//字體粗細
.fontWeight(FontWeight.Bold)
//第一種類型---無文字圓形按鈕
//type:按鈕形狀類型（按鈕風格）
Button({type:ButtonType.Circle})
.width('50')
.height('50')
//按鈕圓角
.borderRadius(10)
//設置按鈕背景顏色，默認藍色
.backgroundColor('#000')
//按鈕邊框
.border({width:1})
//按鈕邊框顏色
.borderColor('#0AFF00')
//距離左邊距離
.margin({left:100})
//點擊事件
.onClick((event: ClickEvent)=>{
AlertDialog.show({title:'點擊事件',message:'點擊了一下'})
})
//第二種類型---有文字方形按鈕
//按鈕文字可直接在接口中寫出，也在Button中嵌套Text組件使用
//1、直接在接口寫,接口2中的“label”屬性
Button('按鈕1',{type:ButtonType.Normal})
.width(90)
.height(40)
//為了使此按鈕與上方按鈕區分開，可設置其上邊距
.margin({top:20})
//2、嵌套Text組件
Button({type:ButtonType.Normal}){
//可自己設置文字樣式
Text('按鈕2').fontSize(16).fontColor('#FFF')
}.width(90).height(40).margin({top:20})
}
.width('100%')
.height('100%')
}
}
??https://harmonyos.51cto.com??
