鴻蒙應(yīng)用開發(fā)從入門到入行

第二篇 - 開發(fā)工具與基礎(chǔ)組件

導(dǎo)讀：在本篇文章里，您將掌握鴻蒙開發(fā)工具DevEco的基本使用房揭、ArkUI里的基礎(chǔ)組件秆乳，并通過制作一個(gè)簡(jiǎn)單界面掌握使用

鴻蒙開發(fā)工具 - DevEco

工欲善其事，必先利其器拦焚。這節(jié)就讓我們來看看以后會(huì)伴隨我們鴻蒙開發(fā)的工具怜奖，如何下載使用

DevEco介紹

• HUAWEI DevEco Studio（以下簡(jiǎn)稱DevEco Studio）是基于IntelliJ IDEA Community開源版本打造（Java開發(fā)者狂喜浑测，與idea基本一樣）翅阵，為運(yùn)行在HarmonyOS系統(tǒng)上的應(yīng)用和服務(wù)（以下簡(jiǎn)稱應(yīng)用/服務(wù)）提供一站式的開發(fā)平臺(tái)歪玲。
• 作為一款開發(fā)工具，除了具有基本的代碼開發(fā)掷匠、編譯構(gòu)建及調(diào)測(cè)等功能外滥崩，DevEco Studio還具有如下特點(diǎn)：
  • 高效智能代碼編輯：支持ArkTS、JS讹语、C/C++等語言的代碼高亮钙皮、代碼智能補(bǔ)齊、代碼錯(cuò)誤檢查、代碼自動(dòng)跳轉(zhuǎn)短条、代碼格式化导匣、代碼查找等功能，提升代碼編寫效率茸时。
  • 多端雙向?qū)崟r(shí)預(yù)覽：支持UI界面代碼的雙向預(yù)覽贡定、實(shí)時(shí)預(yù)覽、動(dòng)態(tài)預(yù)覽可都、組件預(yù)覽以及多端設(shè)備預(yù)覽缓待，便于快速查看代碼運(yùn)行效果。
  • 多端設(shè)備模擬仿真：提供HarmonyOS本地模擬器渠牲，支持Phone等設(shè)備的模擬仿真旋炒，便捷獲取調(diào)試環(huán)境。
  • DevEco Profiler性能調(diào)優(yōu)：提供實(shí)時(shí)監(jiān)控能力和場(chǎng)景化調(diào)優(yōu)模板签杈，便于全方位的設(shè)備資源監(jiān)測(cè)瘫镇，采集數(shù)據(jù)覆蓋多個(gè)維度，為開發(fā)者帶來高效芹壕、直通代碼行的調(diào)優(yōu)體驗(yàn)
• 好的汇四，上面內(nèi)容太多太正式了，咱們提煉一下上面說的四點(diǎn)：
  • 能寫代碼
  • 能實(shí)時(shí)看代碼效果
  • 能用模擬器模擬真機(jī)來調(diào)試
  • 提供了性能分析工具踢涌，幫助app性能調(diào)優(yōu)

運(yùn)行環(huán)境要求

為保證DevEco Studio正常運(yùn)行通孽，建議電腦配置滿足如下要求：

• 操作系統(tǒng)：Windows10 64位、Windows11 64位

• 內(nèi)存：16GB及以上

• 硬盤：100GB及以上

• 分辨率：1280*800像素及以上

• 操作系統(tǒng)：macOS(X86) 12/13/14 macOS(ARM) 12/13/14

• 內(nèi)存：8GB及以上

• 硬盤：100GB及以上

• 分辨率：1280*800像素及以上

• 注意：windows版內(nèi)存需16GB以上睁壁，mac需8GB以上背苦，不滿足的話可能開發(fā)過程會(huì)相對(duì)比較卡。

下載與安裝

• developer.huawei.com/consumer/cn…
• 安裝過程就不詳細(xì)介紹了潘明，總之Windows版就是下一步下一步直到完成（默認(rèn)安裝到C盤行剂，若不愿意則自己改一下安裝位置再下一步），Mac版只需要拖入應(yīng)用程序（Applications）文件夾即可

切換為中文環(huán)境

• DevEco安裝后界面默認(rèn)是英文的钳降，如果更習(xí)慣看中文界面厚宰，可通過如下方式設(shè)置

• windows版修改：

  • 進(jìn)入項(xiàng)目后，菜單欄選File -> Setting -> Plugins -> 搜索chinese -> 啟用 -> 重啟DevEcho后生效

image.png

image.png

image.png

• mac版修改

  • 與windows版區(qū)別僅在于第一步不是從菜單欄File進(jìn)入遂填，而是在菜單欄蘋果圖標(biāo)后第一項(xiàng)進(jìn)入

image.png

image.png

創(chuàng)建項(xiàng)目

1. 若首次打開DevEco Studio铲觉，請(qǐng)點(diǎn)擊Create Project（新建項(xiàng)目）創(chuàng)建工程。如果已經(jīng)打開了一個(gè)工程吓坚，請(qǐng)?jiān)诓藛螜谶x擇File（文件） > New（新建） > Create Project（新建項(xiàng)目）來創(chuàng)建一個(gè)新工程撵幽。
2. 選擇Application應(yīng)用開發(fā)（Application下面的Atomic Service是元服務(wù)開發(fā)，后面學(xué)）礁击，選擇模板“Empty Ability”盐杂，點(diǎn)擊Next進(jìn)行下一步配置逗载。

image.png

3. 進(jìn)入配置工程界面，Compatible SDK選擇“5.0.0(12)”（默認(rèn)就是它链烈，這就是鼎鼎大名的純血鴻蒙版）厉斟，其他參數(shù)保持默認(rèn)設(shè)置即可。

image.png

4. 點(diǎn)擊Finish强衡，工具會(huì)自動(dòng)生成示例代碼和相關(guān)資源捏膨，等待工程創(chuàng)建完成。

項(xiàng)目區(qū)域說明

image.png

• 如上圖所示：

  • 左側(cè)的大區(qū)域?yàn)轫?xiàng)目資源管理區(qū)食侮，項(xiàng)目的一切資源都在這里展示

    • 早期我們只需要關(guān)注entry這個(gè)文件夾即可号涯，我們?cè)缙诘乃写a都在這個(gè)文件夾里編輯
    • 其中entry->src->main->ets->pages這個(gè)文件夾早期會(huì)成為我們寫頁面的地方
    • 其中entry->src->main->resource這個(gè)文件夾將來會(huì)作為我們放圖片資源和國際化的地方
    • 其他的文件就不一一介紹，貓林老師不喜歡像其他教程一樣上來就把所有文件功效列出來锯七，沒意義链快。看完也記不住眉尸，還不如咱們用到什么就介紹什么域蜗，然后這些文件自然而然就知道是啥意思了

  • 中間是代碼編輯區(qū)域，以后寫代碼就是在這里了噪猾，如果你覺得中間區(qū)域不夠大霉祸，可以把左側(cè)面板縮小甚至折疊

  • 右側(cè)是側(cè)邊工具欄，前期我們最常用的就是預(yù)覽器袱蜡，這個(gè)地方就是實(shí)時(shí)查看界面效果的地方丝蹭，并且代碼一改，預(yù)覽器自動(dòng)刷新

  image.png

• 底部區(qū)域我們前期暫時(shí)用不上坪蚁，將來可能需要在終端里輸入命令下載一些三方包奔穿、日志里查看console.log的輸出等。但目前無須過于關(guān)注

Tips：新建項(xiàng)目后敏晤，頁面代碼里默認(rèn)就會(huì)有個(gè)Text贱田，并且打開預(yù)覽器會(huì)看到Hello World，嘗試修改Text小括號(hào)里的內(nèi)容嘴脾，給它一個(gè)字符串男摧，試試看預(yù)覽器會(huì)否有變化呢？

ArkTS語法說明

• ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言译打，ArkTS是在TypeScript（簡(jiǎn)稱TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展耗拓，保持了TS的基本風(fēng)格，同時(shí)通過規(guī)范定義強(qiáng)化開發(fā)期靜態(tài)檢查和分析扶平，提升程序執(zhí)行穩(wěn)定性和性能帆离。

• 這里做個(gè)簡(jiǎn)單說明：TypeScript相當(dāng)于擴(kuò)展了JavaScript蔬蕊，多了些語法结澄。而ArkTS又相當(dāng)于擴(kuò)展了TypeScript哥谷，關(guān)系如下圖

image.png

• 從上圖可以看到JS、TS擁有的語法麻献，ArkTS也有们妥，甚至更多（主要添加了一些聲明式UI語法）。

  • 注：實(shí)際上出于穩(wěn)定勉吻、安全的目的监婶，有部分語法、接口在ArkTS里也不允許使用齿桃。但是大家都放心惑惶，這些語法、接口甚至在JS里大家也用的少短纵，例如Object.getOwnPropertyDescriptor之類的這種方法带污。所以大家可以四舍五入默認(rèn)TS的語法ArkTS都能用即可

• 最后，貓林老師要說明一點(diǎn)非常重要的事：本教程不會(huì)做基礎(chǔ)語法講解

  • 貓林老師默認(rèn)本文章的讀者至少是懂：變量香到、常量鱼冀、分支語句、循環(huán)語句悠就、函數(shù)千绪、數(shù)組、對(duì)象梗脾、類荸型、接口這些內(nèi)容的

  • 納尼？你毛都不會(huì)炸茧？那麻煩出門左轉(zhuǎn)買包華子抽根煙冷靜下帆疟。然后坐等貓林老師將來出語法教程。

  image.png

• 如果你懂TS宇立，那么可以說接下來的語法你毫無壓力踪宠，只是隨著學(xué)習(xí)了解一些ArkTS新增的語法（這個(gè)貓林老師會(huì)講）

  • 如果你僅僅只懂JS，其實(shí)問題也不大妈嘹。TS本身在語法層面跟JS區(qū)別不大柳琢，而且語言是相通的，只要你明白變量润脸、常量柬脸、分支語句等等這些概念，其實(shí)到時(shí)候一看貓林老師的代碼毙驯，就知道是啥意思倒堕。
  • 就好比下面這句代碼

let age: number = 16

• 你用屁股想都知道是聲明了一個(gè)變量，變量類型是number爆价，值是16
• 退一萬步說垦巴，假設(shè)后面的教程里如果有某個(gè)語法你看不懂是什么意思媳搪，也可以搜一搜，或者利用AI解答一下骤宣，或者直接留言問貓林老師也可以的秦爆。絕對(duì)不會(huì)影響學(xué)習(xí)進(jìn)度和體驗(yàn)。而且這樣相當(dāng)于在新知識(shí)中補(bǔ)全自己的TS水平憔披，貓林老師覺得大贊呢等限！

• 好了，廢話不多說芬膝。接下來望门，我們正式進(jìn)入到鴻蒙開發(fā)的世界！

image.png

ArkUI - 基礎(chǔ)組件

• ArkUI（方舟UI框架）為應(yīng)用的UI開發(fā)提供了完整的基礎(chǔ)設(shè)施锰霜，包括簡(jiǎn)潔的UI語法怒允、豐富的UI功能（組件、布局锈遥、動(dòng)畫以及交互事件）纫事，以及實(shí)時(shí)界面預(yù)覽工具等，可以支持開發(fā)者進(jìn)行可視化界面開發(fā)
  • 上句是官網(wǎng)對(duì)ArkUI的說明
  • 這里貓林老師提煉一下：ArkUI相當(dāng)于是華為內(nèi)置好的UI組件庫所灸，我們可以用這些不同的組件組合在一起構(gòu)成精美的頁面

代碼結(jié)構(gòu)

• 在正式學(xué)習(xí)組件前丽惶，我們先聊聊默認(rèn)生成的代碼結(jié)構(gòu)以便幫助你更好的入門，每部分具體內(nèi)容請(qǐng)看下圖

image.png

• 在這張圖里爬立，零基礎(chǔ)的老鐵們暫時(shí)不用管其他的是什么意思钾唬。你只要知道一個(gè)：build函數(shù)不能刪，且它里面是寫界面的地方

Text組件

• Text是我們新建項(xiàng)目后在build里見到的第一個(gè)組件侠驯÷崭眩看名字都知道，這貨肯定是用來顯示文本的吟策，就像上圖儒士，我們能看到文字，就是因?yàn)樵?code>build里有一個(gè)Text

Text('文字內(nèi)容')

• 注意檩坚，小括號(hào)里給字符串着撩，單引號(hào)、雙引號(hào)匾委、模板字符串反引號(hào)都可

• 自己動(dòng)手試試

  • 來到pages/index.ets文件拖叙，把build里的代碼都刪掉，直接寫一個(gè)Text試試赂乐，例如

@Entry
@Component
struct Index {
build() {
  Text('貓林老師')
}
}

• 效果如下

image.png

• 通過效果我們發(fā)現(xiàn)Text果然能顯示文本薯鳍，但是如果覺得文本默認(rèn)樣式不是你喜歡的，你還可以對(duì)它修改屬性挨措，以后組件的屬性修改語法統(tǒng)一都是

組件() {
 
}
.屬性(屬性值)

• 注意：在ArkTS里挖滤，所有的屬性都是以方法形式存在的崩溪，所以也稱之為屬性方法

• 那Text有哪些常用屬性呢？這里貓林老師列一下

  • fontSize
    • 字體大小壶辜，默認(rèn)為16vp（vp是一種自適應(yīng)單位，會(huì)自動(dòng)根據(jù)設(shè)備不同轉(zhuǎn)換成不同的像素担租，不寫單位默認(rèn)就是vp）
  • fontColor
    • 字體顏色
    • 支持16進(jìn)制顏色砸民，支持RGB顏色，以及華為提供的內(nèi)置顏色枚舉
  • fontWeight
    • 字體粗細(xì)奋救，支持?jǐn)?shù)字岭参，以及華為提供的枚舉

• 代碼例

@Entry
@Component
struct Index {
  build() {
    Text('貓林老師')
      .fontSize(32) // 設(shè)置字體大小為32
      .fontColor('#f00') // 設(shè)置字體顏色為紅色，也可以寫 'rgb(255,0,0)'尝艘，效果一樣
      .fontWeight(700)   // 設(shè)置字體粗細(xì)為700（加粗了）
  }
}

• 之前貓林老師說了演侯，顏色可以寫16進(jìn)制，也可以寫rgb背亥，所以上述代碼你換成.fontColor('rgb(255,0,0)')效果也一樣秒际，但要注意的是，他們都得是字符串狡汉，即被引號(hào)包起來

• 但是像上述代碼娄徊，文字顏色、文字粗細(xì)這種要么是寫字符串盾戴，要么寫數(shù)字的寄锐，其實(shí)閱讀起來并不直觀。所以華為還提供了枚舉來修改

@Entry
@Component
struct Index {
build() {
  Text('貓林老師')
    .fontSize(32)
    .fontColor(Color.Red)
    .fontWeight(FontWeight.Bold)
}
}

• 這里的Color.Red相當(dāng)于是'#f00'或'rgb(255,0,0)'尖啡，但是用這種華為提供的枚舉寫法橄仆，會(huì)更加便于閱讀，一看就知道是紅色

• 這里的FontWeight.Bold相當(dāng)于是700衅斩，但是一看Bold就是加粗

• 注意：華為內(nèi)置枚舉的首字母一般都大寫

• 在DevEco開發(fā)工具里盆顾，其實(shí)只要一寫好枚舉類型再按一個(gè)點(diǎn)，它會(huì)自動(dòng)出對(duì)應(yīng)的值的提示畏梆，選中一個(gè)就好椎扬，如下圖

image.png

根組件

• 在學(xué)完Text后，我們發(fā)現(xiàn)具温，當(dāng)我們嘗試要多加一個(gè)Text后蚕涤，會(huì)報(bào)錯(cuò)，如下圖

image.png

• 這是為什么呢铣猩？難道不允許貓林老師很帥揖铜？

  • 當(dāng)然不是！达皿！

• 這是因?yàn)樵邙櫭砷_發(fā)里天吓，也遵循一個(gè)頁面（或一個(gè)自己封裝的組件）必須有且只有一個(gè)根組件的規(guī)定

• 那么贿肩，什么是根組件呢？

  • 根組件就是包住當(dāng)前頁面所有內(nèi)容的最外部容器
  • 一般都是用布局組件來作為根組件（布局組件接下來就會(huì)講兩個(gè)：Column與Row龄寞，其他的布局組件學(xué)一個(gè)記一個(gè)）

• 所以上圖報(bào)錯(cuò)汰规，正是因?yàn)槲覀冇袃蓚€(gè)Text，但它并沒有一個(gè)包住他們的最外部容器

  • 解惑：為什么只有1個(gè)Text時(shí)不報(bào)錯(cuò)呢物邑？因?yàn)橹挥?個(gè)時(shí)溜哮，它既是根組件又是內(nèi)容

• 解決辦法：在build里面，兩個(gè)Text最外面包一個(gè)Column

  build() {
    Column() {
      Text('貓林老師')
        .fontSize(32)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)

      Text('很帥')
    }
  }

• 此時(shí)效果如下

  
  
  image.png

Column組件

• Column組件是ArkUI里專門用來做縱向布局的容器組件

• 特點(diǎn)：能讓它的子組件從上到下進(jìn)行排列

• 用法：

Column () {
// ...
}

• 所以上例中色解，我們給兩個(gè)Text一旦加上Column這個(gè)父組件后茂嗓，他們就一上一下排列了

• 一般情況下，頁面的根容器需要鋪滿整個(gè)頁面科阎，所以需要給寬高述吸。如果不給，默認(rèn)是它的內(nèi)容多大锣笨，它就多大

注意：貓林老師在這里給大家提煉一個(gè)ArkUI的特點(diǎn)：任何組件不給寬高默認(rèn)都無寬高蝌矛，全是靠?jī)?nèi)容自動(dòng)撐開

• 所以一般情況下，我們還會(huì)給Column設(shè)置寬高错英，繼續(xù)修改上述案例朴读，添加寬高

  Column() {
    Text('貓林老師')
      .fontSize(32)
      .fontColor(Color.Red)
      .fontWeight(FontWeight.Bold)

    Text('很帥')
  }
  .width('100%')
  .height('100%')

• 此時(shí)結(jié)果如下

image.png

• 加完Column這個(gè)根容器后，我們還發(fā)現(xiàn)兩個(gè)文字都水平居中了走趋，原因跟Column的默認(rèn)排列方式有關(guān)衅金，所以我們來了解下

• 首先需要了解在鴻蒙開發(fā)中的坐標(biāo)系，分為兩個(gè)軸簿煌。

  • 如圖氮唯，左上角為坐標(biāo)軸起點(diǎn)（原點(diǎn)），從左至右為X軸姨伟，從上至下為Y軸

image.png

• 然后在Column布局容器里惩琉，因?yàn)槟J(rèn)情況下Column是讓子組件從上往下排列，所以把y軸這根軸稱之為主軸夺荒，x軸稱之為交叉軸
• 默認(rèn)情況下瞒渠，Column會(huì)讓子組件在主軸方向，默認(rèn)是從起點(diǎn)開始排列對(duì)齊技扼，而在交叉軸方向是默認(rèn)居中
• 因此伍玖，我們會(huì)發(fā)現(xiàn)上述案例兩個(gè)Text，在Y軸最頂端（因?yàn)閅是主軸）剿吻，在X軸居中（因?yàn)閄是交叉軸）

• 能否修改子組件在主軸窍箍、交叉軸上的排列呢？當(dāng)然可以，請(qǐng)看下圖

• 設(shè)置主軸方向的排列方式

image.png

• 發(fā)現(xiàn)通過justifyContent屬性可以設(shè)置子組件在主軸方向排列方式椰棘，一共有六種取值
  * FlexAlign.Start：默認(rèn)值纺棺。在主軸起點(diǎn)依次排列
  * FlexAlign.Center：主軸居中
  * FlexAlign.End：主軸終點(diǎn)
  * FlexAlign.SpaceBetween： 子組件之間平分間距，并且首組件和尾組件分別在起點(diǎn)和終點(diǎn)
  * FlexAlign.SpaceAround：子組件之間平分間距邪狞，并且首尾組件距離起點(diǎn)和終點(diǎn)也有間距祷蝌，首尾間距是組件間距的一半
  * FlexAlign.SpaceEvenly： 子組件之間平分間距，并且首尾組件距離起點(diǎn)和終點(diǎn)也有間距帆卓，他們間距全部相等
  • 題外話：會(huì)CSS的同學(xué)會(huì)發(fā)現(xiàn)這無非就是Flex布局巨朦，只不過比CSS的Flex布局多了SpaceEvenly

• 如果你想主軸方向排列自己設(shè)置子組件之間的間距，可以用傳入space參數(shù)鳞疲，用法如下

Column ({ space: 10 }) {
 // 子組件
}

• 若子組件有三個(gè)罪郊，則會(huì)如下圖排列（其中的space距離就是上述代碼傳入的10）

image.png

• 設(shè)置子元素在交叉軸方向的排列（通過設(shè)置AlignItems屬性）

image.png

• 發(fā)現(xiàn)通過HorizontalAlign屬性可以設(shè)置子元素在交叉軸方向排列方式蠕蚜，一共有三種取值
  • 注意：Horizontal是水平的意思尚洽，所以這里很明顯就是在水平方向排列。
  • HorizontalAlign.Start： 在水平方向起點(diǎn)對(duì)齊
  • HorizontalAlign.Center：在水平方向居中對(duì)齊
  • HorizontalAlign.End：在水平方向終點(diǎn)對(duì)齊

• 檢驗(yàn)所學(xué)：

  • 思考靶累，如何讓上述案例兩個(gè)文字腺毫，無論垂直還是水平方向都居中呢？

  • 沒錯(cuò)挣柬，就是給Column設(shè)置justifyContent屬性潮酒，并且值為FlexAlign.Center，即能實(shí)現(xiàn)在主軸（垂直方向）居中邪蛔。然后設(shè)置AlignItems屬性為HorizontalAlign.Center急黎，其中AlignItems可以不用設(shè)置，因?yàn)槟J(rèn)就是交叉軸居中

   Column() {
     Text('貓林老師')
       .fontSize(32)
       .fontColor(Color.Red)
       .fontWeight(FontWeight.Bold)

     Text('很帥')
   }
   .width('100%')
   .height('100%')
   .justifyContent(FlexAlign.Center)
   .alignItems(HorizontalAlign.Center)

Row組件

• Row組件是ArkUI里專門用來做橫向布局的容器組件

• 特點(diǎn)：能讓它的子組件從左到右進(jìn)行排列

• 用法也跟Column差不多侧到，只不過他們主軸不一樣勃教。Row的主軸是X軸，交叉軸是Y軸

• 設(shè)置主軸方向的排列方式

image.png

• 通過上圖發(fā)現(xiàn)匠抗，屬性依然叫justifyContent故源，取值依然是HorizontalAlign的六個(gè)值，效果一樣汞贸，只不過變成了在x軸（水平方向排列）

• 設(shè)置交叉方向的排列

image.png

• 注意：設(shè)置交叉軸绳军，依然是用AlignItems屬性，但是取值變成了 VerticalAlign矢腻，畢竟它就是設(shè)置垂直方向门驾，所以叫VerticalAlign

  • 這時(shí)候有懶貨說了，老師多柑，一會(huì)HorizontalAlign猎唁，一會(huì)VerticalAlign，我記不住怎么辦？這時(shí)候不得不說DevEco的強(qiáng)大提示功能了诫隅，你只要一寫AlignItems它就會(huì)給你提示填什么內(nèi)容腐魂，如下圖

image.png

• 同樣的，如果想自己手動(dòng)設(shè)置主軸方向上子組件的間距逐纬，也可以用space

Column ({ space: 10 }) {
  // 子組件
}

image.png

• 動(dòng)手強(qiáng)化：試試蛔屹，把上述案例的根容器變成Row看看效果，并嘗試改它的主軸和交叉軸排列

Image組件

• 專門用來顯示圖片的組件

• Image支持png豁生、jpg兔毒、jpeg、bmp甸箱、svg育叁、webp、gif和heif類型的圖片格式

• 可以加載本地圖片（項(xiàng)目?jī)?nèi)圖片資源）芍殖、網(wǎng)絡(luò)圖片

• 但如果要加載網(wǎng)絡(luò)圖片豪嗽，運(yùn)行到真機(jī)或?yàn)g覽器必須配置申請(qǐng)網(wǎng)絡(luò)權(quán)限

• 接下來我們先演示加載本地圖片，本地圖片一般會(huì)放在entry/src/main/resource/base/media文件夾

image.png

• 可以看到豌骏，新建完項(xiàng)目后media里已經(jīng)有一些默認(rèn)圖片了龟梦，那么如何顯示這里的圖片呢？需要用到內(nèi)置的$r函數(shù)

• 例

Image($r('app.media.startIcon'))

• 這就代表找到media文件夾里的startIcon.png這張圖片了窃躲，注意：不用加后綴
• 前面的app.media即代表找到media文件夾计贰，后面就填這個(gè)文件夾內(nèi)的圖片名即可

• 效果如下

image.png

• 但此時(shí)發(fā)現(xiàn)，圖片鋪滿了屏幕蒂窒。原因是在ArkUI的所有組件里躁倒，如果不給寬高默認(rèn)會(huì)以內(nèi)容作為最終寬高，因此Image沒給寬高會(huì)用圖片實(shí)際寬高作為Image的寬高洒琢，而這張圖片過大秧秉，所以撐滿屏幕都還沒顯示完

• 繼續(xù)設(shè)置寬高后則正常

image.png

• 這里同學(xué)們可能會(huì)發(fā)現(xiàn)貓林老師只給了寬度沒給高度，因?yàn)檫@就像css里的一樣纬凤，圖片給了寬度福贞，它會(huì)自動(dòng)按原圖比例計(jì)算出高度

• 我們?cè)僭囋囎?code>Image加載網(wǎng)絡(luò)圖片

  • 圖片地址：www-file.huawei.com/-/media/cor…

      Image('https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png')
        .width(100)

image.png

• 發(fā)現(xiàn)，僅僅只需要在Image里傳入圖片網(wǎng)址字符串即可

• 但是這時(shí)候有同學(xué)疑惑了：你這個(gè)老嗶登停士，之前不是說要申請(qǐng)網(wǎng)絡(luò)權(quán)限嗎挖帘？咋這會(huì)不需要了？

image.png

• 如果你是如此質(zhì)疑我恋技，我表示：質(zhì)疑的好拇舀！說明你們剛剛認(rèn)真學(xué)習(xí)了！但是要注意：我說的是真機(jī)或模擬器運(yùn)行時(shí)需要申請(qǐng)網(wǎng)絡(luò)權(quán)限蜻底，而現(xiàn)在我們僅僅只是預(yù)覽骄崩，所以能看到。

  • P.S：其實(shí)在之前的DevEco中，即是是預(yù)覽也要配置網(wǎng)絡(luò)權(quán)限要拂，但是在Preview版后抠璃，華為為了方便大家快速做布局看效果，讓大家預(yù)覽器界面也能直接看到網(wǎng)絡(luò)圖片

    • 關(guān)于如何申請(qǐng)網(wǎng)絡(luò)權(quán)限脱惰，后面再講

TextInput組件

• 文本輸入框

• 作用：專門用來讓用戶進(jìn)行輸入的

• 語法

TextInput( { placeholder: '占位符', text: '默認(rèn)值' } )

• 注：如果默認(rèn)值為空搏嗡，則顯示占位符，否則不顯示

  image.png

image.png

• 常用屬性：

  • type：設(shè)置輸入框類型
    • 常用值有：
      • InputType.Normal：默認(rèn)值拉一，普通文本輸入框采盒，支持輸入數(shù)字、字母蔚润、下劃線磅氨、空格、特殊字符
      • InputType.Password：密碼輸入框
      • InputType.Email： 郵箱地址輸入模式嫡纠。支持?jǐn)?shù)字烦租，字母，下劃線货徙，以及@字符（會(huì)自動(dòng)校驗(yàn)內(nèi)容只能存在一個(gè)@字符）
      • InputType.Number： 純數(shù)字輸入模式左权。
      • InputType.PhoneNumber：電話號(hào)碼輸入模式皮胡。支持輸入數(shù)字痴颊、+ 、-屡贺、*蠢棱、#槽奕，長(zhǎng)度不限禀忆。
  • maxLength：設(shè)置最大允許輸入的字符數(shù)
  • 其他暫時(shí)不介紹，用到再說拱镐，還是那句話量没，我不喜歡列一堆東西出來玉转，暫時(shí)用不到大家看了也記不住

Button組件

• 按鈕組件

• 作用：讓用戶點(diǎn)擊或者觸摸

• 語法

Button('按鈕名')

• 默認(rèn)情況下依然是內(nèi)容撐開，所以一般Button需要給寬高

  image.png

• 我們發(fā)現(xiàn)殴蹄，默認(rèn)情況下Button是膠囊型的（也即有圓角）究抓，如果不喜歡還可以設(shè)置樣式

• 屬性

  • type：設(shè)置按鈕樣式，當(dāng)按鈕寬100的情況下袭灯，三種樣式如下

    • ButtonType.Capsule： 默認(rèn)值刺下，膠囊型
  image.png

• ButtonType.Circle： 默認(rèn)值，圓形

   ![image.png](https://upload-images.jianshu.io/upload_images/30303373-304b133bc4be3636.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

  • ButtonType.Normal： 普通型稽荧，就是沒圓角

    image.png

總結(jié)今天內(nèi)容

• DevEco介紹

  • 一款牛逼的鴻蒙開發(fā)工具

• DevEco下載與安裝

  • 略

• DevEco新建項(xiàng)目后橘茉，目前寫代碼的地方在？

  • entry->src->main->ets->pages

• 放圖片的地方在哪？

  • entry/src/main/resource/base/media

• 布局頁面的代碼寫在哪個(gè)函數(shù)內(nèi)畅卓？

  • build

• 基礎(chǔ)組件

  • Text

    • 文本組件擅腰，展示一段文本
    • 屬性：
      • fontColor
      • fontSize
      • fontWeight

  • Column：

    • 布局組件，能讓子組件從上到下布局（沿著y軸布局）

    • 如果要自主設(shè)置子組件的間距翁潘，可以傳入space

      <pre>

      dart

      代碼解讀

      復(fù)制代碼

      Column({ space: 間距數(shù) }) </pre>

    • 屬性有

      • justifyContent：設(shè)置子組件在主軸的排列方式

        • FlexAlign.Start：在主軸起點(diǎn)
        • FlexAlign.Center：在主軸居中
        • FlexAlign.End：在主軸終點(diǎn)
        • FlexAlign.SpaceBetween：首尾子組件在主軸起點(diǎn)和終點(diǎn)無間距惕鼓，并且每個(gè)子組件之間平分間距
        • FlexAlign.SpaceAround：每個(gè)子組件之間平分間距，首尾子組件在主軸起點(diǎn)和終點(diǎn)也有間距且間距是子組件之間的一半
        • FlexAlign.SpaceEvenly：每個(gè)子組件之間平分間距唐础，首尾子組件在主軸起點(diǎn)和終點(diǎn)也有間距且間距相等

      • alignItems： 設(shè)置子組件在交叉軸排列方式（用在Column代表設(shè)置水平方向）

        • HorizontalAlign.Start：子組件在水平方向起點(diǎn)對(duì)齊
        • HorizontalAlign.Center：子組件在水平方向居中對(duì)齊
        • HorizontalAlign.End：子組件在水平方向終點(diǎn)對(duì)齊

  • Row：

    • 布局組件箱歧，能讓子組件從左到右布局（沿著x軸布局）

    • 如果要自主設(shè)置子組件的間距，可以傳入space

      <pre>

      dart

      代碼解讀

      復(fù)制代碼

      Row({ space: 間距數(shù) }) </pre>

    • 屬性方法有

      • justifyContent：設(shè)置子組件在主軸的排列方式

        • FlexAlign.Start：在主軸起點(diǎn)
        • FlexAlign.Center：在主軸居中
        • FlexAlign.End：在主軸終點(diǎn)
        • FlexAlign.SpaceBetween：首尾子組件在主軸起點(diǎn)和終點(diǎn)無間距一膨，并且每個(gè)子組件之間平分間距
        • FlexAlign.SpaceAround：每個(gè)子組件之間平分間距呀邢，首尾子組件在主軸起點(diǎn)和終點(diǎn)也有間距且間距是子組件之間的一半
        • FlexAlign.SpaceEvenly：每個(gè)子組件之間平分間距，首尾子組件在主軸起點(diǎn)和終點(diǎn)也有間距且間距相等

      • alignItems： 設(shè)置子組件在交叉軸排列方式（用在Row代表設(shè)置垂直方向）

        • VerticalAlign.Start：子組件在水平方向起點(diǎn)對(duì)齊
        • VerticalAlign.Center：子組件在水平方向居中對(duì)齊
        • VerticalAlign.End：子組件在水平方向終點(diǎn)對(duì)齊

  • Image組件

    • 顯示一張圖片

    • 可以顯示本地也可以顯示網(wǎng)絡(luò)

    • 真機(jī)或模擬器運(yùn)行豹绪，顯示網(wǎng)絡(luò)圖片需要申請(qǐng)權(quán)限

    • 用$r加載本地圖片

  • TextInput組件

    • 輸入框

    • 可以傳入placeholder屬性設(shè)置占位符价淌，也可以用text屬性綁定輸入內(nèi)容

    • type屬性方法修改輸入框類型

      • InputType.Normal：默認(rèn)值，普通文本輸入框

      • InputType.Password：密碼輸入框

      • InputType.Email： 郵箱地址輸入模式

      • InputType.Number： 純數(shù)字輸入模式瞒津。

      • InputType.PhoneNumber：電話號(hào)碼輸入模式蝉衣。

  • Button組件

    • 按鈕
    • type屬性方法設(shè)置樣式
      • ButtonType.Capsule：默認(rèn)值，膠囊型
      • ButtonType.Circle：圓形
      • ButtonType.Normal：無圓角

課后練習(xí)

• 單選題

  1. 需要在主軸上使第一個(gè)元素到行首的距離和最后一個(gè)元素到行尾的距離是相鄰元素之間距離的一半巷蚪，通過下列那種方式設(shè)置病毡？

     A. justifyContent(FlexAlign.SpaceBetween)

     B. justifyContent(FlexAlign.SpaceAround)

     C. justifyContent(FlexAlign.SpaceEvenly)

     D. justifyContent(FlexAlign.Center)

  2. 當(dāng)開發(fā)者需要使用TextInput完成一個(gè)密碼輸入框，推薦設(shè)置type屬性方法為下面哪個(gè)值屁柏？

     A. InputType.Normal

     B. InputType.Password

     C. InputType.Email

     D. InputType.Number

  3. Image如果要加載entry/src/main/resource/base/media/my.png這張圖片啦膜，下面哪種寫法是對(duì)的？

     A. $r('my.png')

     B. $r('app.media.my.png')

     C. $r('app.media.my')

     D. $r('media.my')

• 多選題

  • 下面哪些屬于屬性方法淌喻？

    A. fontSize() B. onClick() C. width() D. height()

• 判斷題

  • 在Column容器中的子組件默認(rèn)是按照從上到下的垂直方向布局的僧家，其主軸的方向是垂直方向，在Row容器中的組件默認(rèn)是按照從左到右的水平方向布局的裸删，其主軸的方向是水平方向八拱。

• 擴(kuò)展練習(xí)題

  • 利用今天所學(xué)制作一個(gè)界面，要求如圖

    
    
    image.png

    *   提示：可以把今天所學(xué)的組件全用上涯塔，建議分析界面先確定整體大容器肌稻，由外而內(nèi)
*   這個(gè)案例在下一天課程里也會(huì)先進(jìn)行講解，屆時(shí)大家可以對(duì)照一下思路是否一致呢伤塌？

互動(dòng)環(huán)節(jié)

• 經(jīng)過今天的學(xué)習(xí)灯萍，你覺得ArkTS語法和你所熟悉的哪款語言比較像呢？評(píng)論區(qū)留言歡迎說說
• 如果有什么對(duì)課程的建議和想法也請(qǐng)歡迎說說
• 再次強(qiáng)調(diào)每聪，如果你喜歡本文旦棉，請(qǐng)點(diǎn)贊收藏齿风。您的每個(gè)點(diǎn)贊與收藏都是激烈我不斷快速更新下去的動(dòng)力。希望免費(fèi)的贊贊與收藏不要吝嗇绑洛！