[[412412]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

本文引言

時間：2021年7月15日08:35:27

本文包含筆者對徐文禮老師的《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典》的學(xué)習(xí)過程中的筆記總結(jié)、拓展思考、案例反饋、閱讀體驗。

為尊重老師的知識產(chǎn)權(quán)和精簡本文，本文不會粘貼代碼、倒置案例、機(jī)械打字。

DevEco開發(fā)文檔

第3章 鴻蒙ACE Java 應(yīng)用框架

時間：2021年7月15日08:37:02

ACE(Ability Cross-platform Environment)，即面向元能力的跨平臺開發(fā)運(yùn)行環(huán)境。

用來開發(fā)鴻蒙富設(shè)備應(yīng)用程序

拓展思考：

富設(shè)備：是華為首提，相對于輕量級設(shè)備(如 Lite wearable 內(nèi)存有限、功能有限)。所謂“富設(shè)備”，指的是使用頻率高、強(qiáng)交互的設(shè)備，比如白板、投影儀、電視機(jī)、電子本等。

開發(fā)文檔拓展(時間：2021年7月16日10:19:31)：

Java UI框架提供了一部分Component和ComponentContainer的具體子類，即創(chuàng)建用戶界面(UI)的各類組件，包括一些常用的組件(比如：文本、按鈕、圖片、列表等)和常用的布局**(比如：DirectionalLayout和DependentLayout)。**

組件和布局

用戶界面元素統(tǒng)稱為組件，組件根據(jù)一定的層級結(jié)構(gòu)進(jìn)行組合形成布局。組件在未被添加到布局中時，既無法顯示也無法交互，因此一個用戶界面至少包含一個布局。在UI框架中，具體的布局類通常以XXLayout命名，完整的用戶界面是一個布局，用戶界面中的一部分也可以是一個布局。布局中容納Component與ComponentContainer對象。

Component和ComponentContainer

• Component：提供內(nèi)容顯示，是界面中所有組件的基類，開發(fā)者可以給Component設(shè)置事件處理回調(diào)來創(chuàng)建一個可交互的組件。Java UI框架提供了一些常用的界面元素，也可稱之為組件，組件一般直接繼承Component或它的子類，如Text、Image等。
• ComponentContainer：作為容器容納Component或ComponentContainer對象，并對它們進(jìn)行布局。Java UI框架提供了一些標(biāo)準(zhǔn)布局功能的容器，它們繼承自ComponentContainer，一般以“Layout”結(jié)尾，如DirectionalLayout、DependentLayout等。

LayoutConfig

每種布局都根據(jù)自身特點提供LayoutConfig供子Component設(shè)定布局屬性和參數(shù)，通過指定布局屬性可以對子Component在布局中的顯示效果進(jìn)行約束。例如：“width”、“height”是最基本的布局屬性，它們指定了組件的大小。

組件樹

布局把Component和ComponentContainer以樹狀的層級結(jié)構(gòu)進(jìn)行組織，這樣的一個布局就稱為組件樹。組件樹的特點是僅有一個根組件，其他組件有且僅有一個父節(jié)點，組件之間的關(guān)系受到父節(jié)點的規(guī)則約束。

3.1 ACE運(yùn)行時簡介

時間：2021年7月15日09:16:30

• 除開很多資料都有的ACE支持主流生態(tài)語言【Java、JS(JavaScript)】外，新知識，未來將支持華為自己的開發(fā)語言**“倉頡”**

拓展思考：

據(jù)查：華為倉頡公司真實存在，且類別是研發(fā)設(shè)計。大華為生態(tài)下，自己的開發(fā)語言勢在必行。希望倉頡可以正兒八經(jīng)的推出、穩(wěn)穩(wěn)當(dāng)當(dāng)?shù)耐菩?。期?

• 對ACE圖的理解

 學(xué)習(xí)思考：

此圖可以提煉出一點，Java是命令式，JS是聲明式的。

3.1.1 ACE針對全場景開發(fā)

• 老生常談1+8+N

對于這個N，要提一提，N泛指其他IoT設(shè)備

1. 富設(shè)備-Java、C++語言的開發(fā)框架
2. 輕設(shè)備-JavaScript的開發(fā)框架(可以讓IoT設(shè)備運(yùn)行鴻蒙應(yīng)用程序)

拓展學(xué)習(xí)：

IoT設(shè)備：IoT(Internet of Things)，即物聯(lián)網(wǎng)。在HMS(華為移動服務(wù))生態(tài)下的觸控筆、智能燈、遙控板等設(shè)備也會應(yīng)用。

3.1.2 ACE 支持的兩種UI框架

學(xué)習(xí)總結(jié)：

這里的講的都是UI框架，對于其他框架層(用戶程序框架、Ability框架)還沒講。下面這兩張圖完全展示了其關(guān)系。再往外的話就是HarmonyOS四層系統(tǒng)架構(gòu)了(內(nèi)核、服務(wù)、架構(gòu)、應(yīng)用)

UI：(User Interface)UI 框架是基于前端框架做的框架。

時間：2021年7月15日23:43:07

注：

今兒寫了好多稿子**《彌憾》、《夢蝶》、《氣沖2》，對于本書的學(xué)習(xí)就延后到了接近十二的，但沒事!把3.2學(xué)完再睡。確實是學(xué)校這邊我看到了令我特別感慨的一件事情，然后做了一個招生簡章分析和鴻蒙學(xué)習(xí)路線，其次是對于原子化卡片服務(wù)，我就感覺應(yīng)該有一個大體的指引方向，就根據(jù)社區(qū)的文章進(jìn)行總結(jié)發(fā)散，最后就是李老師的智慧家居的直播實在是將得特別好，很接地氣，對于南向開發(fā)，我就不用開發(fā)板了(沒錢)哈哈哈。在徐老師這本書的帶領(lǐng)下，把OpenHarmony**的一些基本的搞明白就行。

• 基于Java的應(yīng)用程序框架(ACE Java UI)

• 基于JavaScript的應(yīng)用開發(fā)框架(ACE JavaScript UI)

學(xué)習(xí)思考：

JavaScript的語法規(guī)則基本遵循ES6的語法規(guī)范。

ES6:ECMAScript 6

前端開發(fā)人員，可以使用HTML+CSS+JavaScript的形式進(jìn)行應(yīng)用的開發(fā)

后端開發(fā)人員，目前只能使用Java語言進(jìn)行開發(fā)，所以對于JavaScript的開發(fā)者，依然需要Java語言的輔助。

3.2 ACE開發(fā)中的核心概念

時間：2021年7月16日00:13:15

對一些核心概念的介紹

3.2.1 Ability與Slice

• 書中用畫板與畫紙來舉例子，畫板是Ability，畫紙是Slice。

學(xué)習(xí)思考：

Slice是子頁面的意思。Ability是用戶程序的基本組成部分。下圖是關(guān)于Ability的一些介紹。

3.2.2 Ability的分類

兩大類

FA(Feature Ability)有界面，可交互

PA(Page Ability)無界面，提供一些應(yīng)用運(yùn)行需要的能力。對于PA有兩類模板：

• FA：元程序
• PA：元服務(wù)

Service模板(SA)：用于提供后臺運(yùn)行任務(wù)的能力

Data模板(DA)：用于對外部提供統(tǒng)一的數(shù)據(jù)訪問能力

3.2.3 鴻蒙應(yīng)用包結(jié)構(gòu)

• 鴻蒙應(yīng)用軟件包以APP Pack(Application Package)發(fā)布，由一個或多個HAP(HarmonyOS Ability Package)以及每個HAP屬性的pack.info組成。

學(xué)習(xí)查詢：

package-info.java 包的作用

為標(biāo)注在包上的Annotation提供便利

聲明包的私有類和常量

提供包的整體注釋說明

學(xué)習(xí)思考：

一些縮寫的總結(jié)：

HPM(HarmonyOS Package Manager)：鴻蒙包管理器

HVD(HarmonyOS Virtual Device)：鴻蒙虛擬機(jī)

ACE(Ability Cross-Platform Environment)：Ability跨平臺環(huán)境

HAP(HarmonyOS Application Package)：鴻蒙應(yīng)用程序包

BMS(Bundle Manager Service)：Bundle管理服務(wù)

AMS(Ability Manager Service)：Ability管理服務(wù)

DMS(Distribute Manager Service)：分布式管理服務(wù)

HDF(HarmonyOS Driver Foundation)：鴻蒙驅(qū)動框架

HMS(Huawei Mobile Service)：華為移動服務(wù)

HAR(HarmonyOS Achieve)：鴻蒙庫

HML(HarmonyOS Markup Language)：鴻蒙標(biāo)記語言

HAP是Ability的部署包，HarmonyOS應(yīng)用代碼圍繞Ability組件展開。

一個HAP是由代碼、資源、第三方庫應(yīng)用配置文件組成的模板包，分為：

• entry：應(yīng)用主模板。有且只有一個，可獨(dú)立運(yùn)行。
• feature：應(yīng)用的動態(tài)特性模板。只有包含Ability的HAP才能獨(dú)立運(yùn)行。

3.3 創(chuàng)建一個ACE Java項目

時間：2021年7月16日09:35:35

• 這一節(jié)的目標(biāo)

創(chuàng)建項目

布局里放置文本框(顯示數(shù)字)

添加按鈕(每次單擊按鈕讓文本框的數(shù)字加1)

3.3.1 創(chuàng)建ACE項目

小吐槽：

不得不說，因為鴻蒙迭代很快，DevEco也變得很快，書里的用圖是以前版本的，現(xiàn)在的DevEco是如下所示。

很簡單的流程不贅述，創(chuàng)建Java項目(first_demo),并進(jìn)行預(yù)覽。

3.3.2 編寫布局

書中的代碼均沒有格式化!!!!!

• 在src/main/resources/base/layout/ability_main.xml文件下，添加Text組件和一個Button組件。
• 為通過Button屬性background_element引入，background_element的值**$graphic表示引用graphic文件夾**。background_ability_main是graphic文件夾下的xml文件。

學(xué)習(xí)總結(jié)：

在編寫頁面布局的預(yù)覽的時候，發(fā)現(xiàn)一個問題，書上給的是1080 X 2250的但現(xiàn)在模擬器上是1080 X 2340

根據(jù)組件的功能，可以將組件分為布局類、顯示類、交互類三類：

關(guān)于ACE Java中的屬性：

//DirectionalLayout 
//  對齊方式 
ohos:alignment="center" 
//子布局排列方向 
ohos:orientation="vertical" 

虛擬像素單位：vp

虛擬像素(virtual pixel)是一臺設(shè)備針對應(yīng)用而言所具有的虛擬尺寸(區(qū)別于屏幕硬件本身的像素單位)。它提供了一種靈活的方式來適應(yīng)不同屏幕密度的顯示效果。

字體像素單位：fp

字體像素(font pixel) 大小默認(rèn)情況下與 vp 相同，即默認(rèn)情況下 1 fp = 1vp。如果用戶在設(shè)置中選擇了更大的字體，字體的實際顯示大小就會在 vp 的基礎(chǔ)上乘以 scale 系數(shù)，即 1 fp = 1 vp * scale。

3.3.3 編寫界面邏輯代碼

時間：2021年7月16日10:32:38

• 實現(xiàn)“單擊加1“的功能

時間：2021年7月16日11:55:55

3.3報錯了

• 第二天修正繼續(xù)

時間：2021年7月17日10:51:58

• 建立了另外一個Project(demo20210717)，然后把頁面布局做了出來

對比了一下，好像這個布局才是正確的，昨天做的是按鈕居中。

然后繼續(xù)!編寫界面邏輯

• 發(fā)現(xiàn)，，，錯誤是標(biāo)簽無法識別。所以我就查Text在哪個類，原來在Component。然后就AIt+enter，進(jìn)行了import。

import ohos.agp.components.Component; 

• 最后運(yùn)行結(jié)果如下：

學(xué)習(xí)體驗：

書中沒有對Text接口進(jìn)行說明，因為這里我們敲下來，需要對Text進(jìn)行import。

3.3.4 通過模擬器預(yù)覽效果

學(xué)習(xí)總結(jié)：

• Tools-HVD-Manager-install-選擇模擬器
• 現(xiàn)在可供選擇的模擬器有很多

3.3.5 日志HiLog的使用

時間：2021年7月17日11:23:29

• 場景：在編寫過程中，需要通過打印一條條日志來掌握程序運(yùn)行的狀態(tài)
• 在HiLog的輔助類HiLogLabel中定義日志類型、服務(wù)域、標(biāo)記。

一般把它定義位常量并放在類的最上面

static final HiLogLabel label =new HiLogLabel(HiLog.LOG_App,Ox00201,"My_TAG"); 

三個參數(shù)：

• HiLog.LOG_App(日志類型)一般取常量，表示第三方應(yīng)用
• Ox00201(服務(wù)域)，十六進(jìn)制形式。建議前三個數(shù)表示應(yīng)用中的模塊編號，后面兩個數(shù)表示模塊中的類型
• “My_TAG”(一個字符串常量)。標(biāo)識方法調(diào)用的類或服務(wù)行為，一般情況寫類的名字，可以用這個標(biāo)記對日志過濾。

日志的級別(從低到高)：

• debug(調(diào)試信息)
• info(普通信息)
• warn(警告信息)
• error(錯誤信息)
• fatal(致命錯誤信息)

高級應(yīng)用(private和public修飾符)

String URL=“XXX”； 
    int errno=0； 
    HiLog.warn（label、"Failed to visit %{private}，reason：%{public}d.",URL,errno); 

%{}表示位置，其中s是輸出內(nèi)容，輸出時不顯示內(nèi)容;d是輸出的內(nèi)容，輸出時正確顯示。

學(xué)習(xí)思考：

3.4 ACE Java 項目目錄結(jié)構(gòu)

時間：2021年7月17日11:41:22

3.4.1 項目整體結(jié)構(gòu)

• 一個應(yīng)用由一個或多個HAP包所組成，HAP包又可以分為entry和feature類型，每個HAP包由代碼、資源、第三方庫及應(yīng)用配置文件組成。

所以entry就是一個應(yīng)用的HAP包，一個entry類型的HAP包

時間：2021年7月19日08:55:02

• 項目整體架構(gòu)

• test是測試目錄
• libs是用來存儲或引用第三方包**(jar包，so包)**
• build是用來存放最終編譯后的包**(HAP包)**

3.4.2 項目的配置文件

時間：2021年7月19日08:57:33

配置文件為config.json主要桑模塊：

• app：表示應(yīng)用的全局配置，同APP中各個HAP中的app必須一樣
• deviceComfig：表示應(yīng)用在具體設(shè)備上的信息
• module：表示HAP包的配置信息，只對當(dāng)前HAP包生效

拓展學(xué)習(xí)(開發(fā)文檔-開發(fā)基礎(chǔ)知識-應(yīng)用配置文件-配置文件的元素：

json格式、順序無關(guān)、有且僅有

APP：

deviceConfig

具體內(nèi)部要使用的時候直接查就行

module：

module下的ability配置不同的主題：

在開發(fā)文檔表十。

3.4.3 資源文件的使用方式

時間：2021年7月19日12:41:18

• 目錄中的資源文件除開profile目錄中的文件以外其余文件會被編碼為二進(jìn)制文件，并賦予資源文件ID，可以用ResourceTable引用
• 限定目錄需要開發(fā)者自行創(chuàng)建

目錄名稱由一個或多個表征應(yīng)用場景或設(shè)備特征的限定詞組合而成，包括語言、文字、國家或地區(qū)、橫豎屏、設(shè)備類型和設(shè)備密度等六個方面。

順序：語言_ 文字 _國家和地區(qū) -橫豎屏-設(shè)備類型-屏幕密度(連接方式見此)

說實話這部分資源文件的引用這部分不是很懂。暫且放著吧

3.5 ACE Java UI 布局

時間：2021年7月19日12:49:01

兩種布局方式：

• XML方式聲明UI布局
• 代碼方式創(chuàng)建UI布局

系統(tǒng)默認(rèn)XML方式聲明UI布局

XML聲明式布局的方式更加簡便直觀，編程創(chuàng)建布局的方式比較麻煩，需要在AbilitySlice中分別創(chuàng)建組件和布局，并將它們進(jìn)行組織關(guān)聯(lián)。

3.5.1 通過XML的方式創(chuàng)建布局

時間：2021年7月20日08:29:16

3.5.1和3.5.2中的3-4和3-5中的代碼全是開發(fā)文檔中的代碼，書中的文字也是開發(fā)檔案中的文字。

例子3-4

• 創(chuàng)建xml布局：entry-src-main-resources-layout-new-File-XXX.xml
• match_parent: 表示組件大小將擴(kuò)展為父組件允許的最大值，它將占據(jù)父組件方向上的剩余大小
• match_content：表示組件大小與它的內(nèi)容占據(jù)的大小范圍相適應(yīng)
• 代碼中加載XML布局，并添加為根布局或作為其他布局的字Component
• 例3-5

3.5.2 通過編碼的方式創(chuàng)建布局

時間：2021年7月20日09:28:19

3.5.1和3.5.2中的3-4和3-5中的代碼全是開發(fā)文檔中的代碼，書中的文字也是開發(fā)檔案中的文字。

1. 聲明布局
2. 創(chuàng)建組件
3. 編碼布局案例

• 例3-6

基于3.5.1和3.5.2的學(xué)習(xí)思考：

書上的所呈現(xiàn)的內(nèi)容令我很失望，不管是代碼，還是方法總結(jié)都是開發(fā)文檔的內(nèi)容。缺少一點從初學(xué)者的角度對工程建立過程進(jìn)行引導(dǎo)，缺少一點從初學(xué)者的角度對為啥這么敲代碼進(jìn)行一個簡單的解釋。甚至缺乏從示例代碼到示例效果圖的完整流程。

3.5.1的代碼3-5敲完以后編譯,會面臨如問題：

當(dāng)然找不到呀，首先Layout_first_layout和Id_button根據(jù)開發(fā)文檔的import的

別人肯定是在Myapplication創(chuàng)建了ResourceTable的。所以這里要進(jìn)行import。

//敲代碼的時候自帶的 
import ohos.global.systemres.ResourceTable; 
//改為com.hairtail.first_demo這就是自己的項目，可以用自己的xml 
import com.hairtail.first_demo.ResourceTable; 

自己的名目名字在那里看：

最后成功結(jié)果：

3.5.2的代碼3-6敲完以后編譯,會面臨如問題：

會直接跳轉(zhuǎn)到之前3-1,3-2,3-3的點擊加一的界面，其原因肯定是MainAbility中的setMainRoute設(shè)置的不得勁。應(yīng)該設(shè)置為：

super.setMainRoute(ExampleAbilitySlice.class.getName()); 

然后就呈現(xiàn)出效果圖了。

3.5.3 鴻蒙常見布局方式

時間：2021年7月20日10:26:30

• Java UI框架中，具體的布局類通常以XXLayout命名

• Java UI框架中提供的標(biāo)準(zhǔn)布局功能的容器都繼承自ComponentContainer但有些組件繼承自StackLayout并沒有以Layout結(jié)尾：ScrollView、PageSlider。ListContainer組件同樣繼承自ComponentContainer。

書上對這些東西就提一嘴，emm，學(xué)習(xí)的時候還是要保持對知識的好奇心!

學(xué)習(xí)拓展：

(from 開發(fā)文檔)

ScrollView是一種帶滾動功能的組件(交互類)，它采用滑動的方式在有限的區(qū)域內(nèi)顯示更多的內(nèi)容。共有XML屬性繼承自：StackLayout

PageSlider(看了開發(fā)文檔的示例感覺這個組件會很好用)是用于頁面之間切換的組件，它通過響應(yīng)滑動事件完成頁面間的切換。PageSlider無自有的XML屬性，共有XML屬性繼承自：StackLayout

ListContainer是用來呈現(xiàn)連續(xù)、多行數(shù)據(jù)的組件，包含一系列相同類型的列表項。ListContainer的共有XML屬性繼承自：Component

**從3-7到3-17都是對布局的示例。

學(xué)習(xí)體驗：

張榮超老師的手表開發(fā)中也有補(bǔ)充布局這塊的知識，這次相當(dāng)于一個溫故的過程，也希望可以知新。

1.定向布局DirectionalLayout

• DirectionalLayout布局類似Android中的LinearLayout
• DirectionalLayout屬性：

學(xué)習(xí)補(bǔ)充：

• 重點在排列屬性、對齊屬性、權(quán)重屬性

(1)排列屬性

時間：2021年7月20日11:05:00

vertical：垂直

horizontal：水平

• 元素之間會被截取
• 示例3-7

學(xué)習(xí)提要：

為了使案例隔離，需提前創(chuàng)建demo1Slice,并在其中創(chuàng)建布局，然后在mainability中配置路由，最后就是在Layout中創(chuàng)建各種Layout啦。代碼如下(貼代碼是因為該代碼是自己加的，不管書上的事。QAQ)：

//demo1Slice.java 
package com.hairtail.first_demo.slice; 
 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import com.hairtail.first_demo.ResourceTable; 
 
public class demo1Slice extends AbilitySlice { 
    @Override 
    protected void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_second); 
    } 
} 

//配置路由 
super.setMainRoute(demo1Slice.class.getName()); 

學(xué)習(xí)探索：

• 創(chuàng)建偷懶小技巧：不用書中的通過File創(chuàng)建直接通過系統(tǒng)給的Layout Resource File創(chuàng)建，可以通過填寫布局的樣式，創(chuàng)建完畢后自動生成一些代碼，就不用從0開始了。

•  排列屬性垂直

• 排列屬性水平且被截取

思考拓展：

• 這里被截取了，有什么處理方式可以不讓截取呢。試了試match_parent和match_content都不行。那怎么才行，就是后面的權(quán)重屬性(weight)，這塊放到后面去詳細(xì)學(xué)習(xí)。
• 這里對色塊顏色做了一個調(diào)整，因為書上是有顏色區(qū)別的，其目的四展示三個容器之間的排列順序問題。所以我們也要進(jìn)行顏色區(qū)別，再就是這里左邊提供了取色器，可以選擇顏色。

(2)對齊屬性

• 對齊屬性的樣式表在我之前的拓展里有
• 對齊屬性的演示

top、vertical_center、bottom屬性的展示

上面的示例是為了體驗其寬度累加。

• vertical下的left、horizontal、right

(3)權(quán)重屬性

權(quán)重(weight)就是按比例來分配組件占用父組件的大小

• 演示1 : 2 : 1

學(xué)習(xí)探索：

嘗試3： 1 ： 2

2.依賴布局DependentLayout

時間：2021年7月20日12:29:50

• DependentLayout與DirectionalLayout相比，擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。
• DependentLayout相當(dāng)于Android中的相對布局RelativeLayout

學(xué)習(xí)補(bǔ)充：

(from 開發(fā)文檔)

DependentLayout所包含組件可支持的XML屬性表中需要注意的：

• left_of與start_of、end_of屬性有沖突，不建議一起使用。在“水平布局方向為從左到右”時，left_of會與start_of屬性沖突;在“水平布局方向為從右到左”時，left_of會與end_of屬性沖突。
• 同時配置時，start_of、end_of優(yōu)先級高于left_of屬性。
• align_parent_left與align_parent_start、align_parent_end屬性有沖突，不建議一起使用。在“水平布局方向為從左到右”時，align_parent_left會與align_parent_start屬性沖突;在“水平布局方向為從右到左”時，align_parent_left會與align_parent_end屬性沖突。
• 同時配置時，align_parent_start、align_parent_end優(yōu)先級高于align_parent_left屬性。

學(xué)習(xí)體驗：

書本示例代碼==沒有代碼格式化==，導(dǎo)致敲代碼的時候，需要不停的找。這一點的感覺不是很好。

• 示例3-8

學(xué)習(xí)拓展：

• Text屬性italic，文本是否斜體字體，ohos:italic=“true”、ohos:italic=“$boolean:true”。
• text_front

書中的：似乎感覺是錯的。等調(diào)試康康。

ohos:text_font="serif" 

果不其然代碼出現(xiàn)了問題，

其一，關(guān)于text_front的用法出現(xiàn)了問題

其二，按照示例代碼敲的效果圖如下：

其原因經(jīng)過調(diào)試發(fā)現(xiàn)，各個組件默認(rèn)從左到右排列，所以Previous的按鈕在next的左邊，被截取了。把ohos:left_of=“id:button2"改為ohos:right_of="id:button2"改為ohos:righto​f="id:button2”，效果如下：

所以為了達(dá)到書上的效果，就需要把Next按鈕放在最右邊。

也就是在Next按鈕里加上與父組件的依賴關(guān)系。

ohos:align_parent_right="true" 

時間:2021年7月20日13:24:23

我突然發(fā)掘，書上是給了源碼的，，，嘖嘖嘖，，我去看看源碼

，，我一調(diào)試發(fā)現(xiàn)是對的，我懷疑我自己是不是敲錯了。結(jié)果我結(jié)果檢查(無語子)和調(diào)試發(fā)現(xiàn)，源碼是改了的。如下(因為老師的源碼我打了碼)：

跟我的處理方式是一樣的，證實了==三個觀點==：

• 書中和源碼中的ohos:text_font="serif"使用都不符合現(xiàn)在的開發(fā)文檔
• 隨著版本迭代，書中的代碼的確有問題(但老師給的源碼是修正了的)。這跟張榮超老師關(guān)于呼吸手表開發(fā)一書中的代碼錯誤是一樣的。需要讀者自行調(diào)試。
• 自己對于示例3-8的解決方法是正確的，調(diào)整子組件與父組件的關(guān)系即可。

3.表格布局TableLayout

時間：2021年7月20日13:43:16

學(xué)習(xí)補(bǔ)充:

學(xué)習(xí)體驗：

非常抱歉的說，3-9的示例代碼跟開發(fā)文檔是一樣的，且開發(fā)文檔的示例更豐富一些。

• TableLayout類似于Android的TableLayout。(嘖嘖，就是一樣的嘛)
• 通過設(shè)置行數(shù)和列數(shù)來控制表格內(nèi)組件的行和列
• 示例3-9

4.位置布局PositionLayout

時間：2021年7月20日13:46:58

學(xué)習(xí)體驗：

此頁面原創(chuàng)，且其鴻蒙TV管理系統(tǒng)頁面貼近鴻蒙，適應(yīng)主題。

學(xué)習(xí)補(bǔ)充：

對于超過布局本身大小的組件，超出部分將不顯示。

PositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。

(0, 0)為左上角;當(dāng)向下或向右移動時，坐標(biāo)值變大;允許組件之間互相重疊。

PositionLayout開發(fā)文檔提供的案例

本示例演示了PositionLayout的一些特性，包括子組件位置的影響和超越屏幕大小后子組件的顯示規(guī)則。

• PositionLayout為絕對布局，該布局指定了子組件在其中的具體位置(X/Y坐標(biāo))
• 布局靈活性相對較差，在沒有絕對定位的情況下相比其他類型的布局更難以維護(hù)。
• 示例3-10，示例3-11

學(xué)習(xí)體驗：

• 這里的ability_five.xml是缺失的，3-10直接就是ability_six.xml。不知道怎么回事。但源碼里有ability_five.xml。
• 這里需要在源碼那里把圖片CV一下。

下面這行關(guān)于圖片src的引用就出現(xiàn)了報錯。源碼和書中都有問題。

ohos:image_src="$media:log.png" 

學(xué)習(xí)總結(jié)：

‘.’ is not a valid resource name character

“.”不是有效的資源名稱字符

Validates resource references inside Harmony XML files

驗證XML文件中的資源引用

所以解決方式是改成如下模樣：

ohos:image_src="$media:log" 

即可。

• 示例3-10,3-11，3-12

學(xué)習(xí)體驗：

• 其一，書中并沒有提醒讀者關(guān)于config.json文件的修改，在代碼和效果圖直接呈現(xiàn)的溝壑需要讀者自行跨越。這里需要大家在config.json中把"deviceType"加上“tv”注意：這里tv不能是TV。

• 其二，書中和源碼中對于image組件下image_src的使用不規(guī)范(書中和源碼中是：ohos:image_src=“media: log.png")，應(yīng)該參照開發(fā)文檔和DevEco的提示改成ohos:image_src="media:log.png")，應(yīng)該參照開發(fā)文檔和DevEco的提示改成ohos:images​rc="media: log”。

5.堆疊布局StackLayout

時間：2021年7月20日14:42:27

注：

很遺憾，這一塊也還是開發(fā)文檔的示例。

學(xué)習(xí)補(bǔ)充：

• StackLayout直接在屏幕上開辟出一片空白的區(qū)域，添加到這個布局中的視圖都是以層疊的方式顯示。
• 默認(rèn)放到左上角，第一個添加到布局中的視圖顯示在最底層，上一層的視圖會覆蓋下一層的視圖。
• StackLayout相當(dāng)于Android 中的幀布局FrameLayout
• 示例3-13

• 3-14(源代碼沒有-但這里的代碼量很少)

使用layout_alignment屬性可以指定組件在StackLayout中的相對位置(這兒是把Button添加到StackLayout的右邊)

• 3-15將子視圖從后面移到前面(同樣源代碼里么有)

3-15完全不知道寫在那里。源代碼里也沒有找到。其實應(yīng)該在mainability中去設(shè)置setClickedListener。

6.自適應(yīng)布局AdaptiveBoxLayout

時間：2021年7月20日15:39:58

學(xué)習(xí)補(bǔ)充：

自適應(yīng)組件的開發(fā)文檔

自適應(yīng)布局的常用方法

AdaptiveBoxLayout意為自適應(yīng)盒模式布局，是將整個UI劃分為相同寬度，但高度可能不同的行和列的盒子。

• 盒子寬度取決于布局的寬度和盒子數(shù)量
• 每個盒子的高度由其子組件的高度決定
• 子組件的排列只有在前一行被填滿后才會開始在新一行中占位
• 每一行的高度由該行最高盒子決定
• 布局的寬度只有MATCH_PARENT或固定值
• 可以為布局黨的組件設(shè)置長度、寬度和對其方式

示例3-16,3-17(源代碼里無)

哥們兒稀碎!源代碼沒有ability_eight的代碼，三頁半的代碼!我的天。

敲了一半不服氣，去看了源代碼!發(fā)現(xiàn)源代碼的ability_five就是ability_eight

!!!破案了。

學(xué)習(xí)思考：

同樣的問題

ohos:image_src="$media:icon_more" 

 

小總結(jié)

學(xué)習(xí)《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典-徐禮文》已經(jīng)到89/477頁了,第三章的內(nèi)容也學(xué)了一半。做一個總結(jié)。

• 其中關(guān)于有一些鴻蒙特有的概念解釋還是有一些遺漏。(富設(shè)備、IoT設(shè)備)
• 本書作者對開發(fā)過程的一些描述有自己的看法(page和slice的關(guān)系-畫板畫布)
• 本書在示例代碼和源代碼方面有一些問題

1.關(guān)于示例代碼在哪個文件下有些示例并未說明

2.示例代碼與開發(fā)文檔給的示例代碼有重疊，給讀者體驗下降。(3-4、3-5、3-6、3-9、3-13、3-14、3-15)

3.源代碼的ability_five就是ability_eight。名稱不一樣，會給讀者帶來困擾。

4.在3-10、3-11、3-12的鴻蒙TV絕對布局的例子中，書中并沒有提醒讀者關(guān)于config.json文件的修改，需要讀者自行去跨越代碼到效果圖的溝壑。

5.書中和源碼中的ohos:text_font="serif"使用都不符合現(xiàn)在的開發(fā)文檔

6.書中和源碼中對于image組件下image_src的使用不規(guī)范(書中和源碼中是：ohos:image_src=“media: log.png")，應(yīng)該參照開發(fā)文檔和DevEco的提示改成ohos:image_src="media:log.png")，應(yīng)該參照開發(fā)文檔和DevEco的提示改成ohos:images​rc="media: log”

7.著版本迭代，書中的代碼的確有問題(但老師給的源碼是修正了的)，3-8表格布局中，這一行代碼的缺失，ohos:align_parent_right=“true”

雖然問題還是有，但方法總比困難多，加上今天老師回帖，之后有視頻上線，也會有新的案例。

寫筆記的初衷還是給自己的一個輸出過程，也是一種學(xué)習(xí)反饋和激勵。當(dāng)然也希望通過自己的筆記，幫助其他讀者在學(xué)習(xí)中解決遇見的疑惑!

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com