1、組件介紹
組件(Component),是界面搭建及顯示的最小單元。
組件根據功能可以分為五大類:基礎組件、容器組件、媒體組件、繪制組件、畫布組件
2、基礎組件
基礎組件是視圖層的基本組成單元,它包含:Text、Image、TextInput、Button、LoadingProgress……
2.1、Text
Text組件可以在界面上展示一段文本信息,它可以包含子組件Span。
對于包含文本文本元素的組件(如:Text,Span,Button,TextInput……)可以使用fontSize(),fontColor(),fontWeight(),fontFamily(),fontStyle()這些文本樣式設置文本的大小、顏色、粗細、字體等信息。
名稱 | 參數類型 | 描述 |
fontColor | ResourceColor | 設置文本顏色 |
fontSize | Length | Resource | 設置文本尺寸,Length為number類型時,使用fp單位 |
fontStyle | FontStyle | 設置文本的字體樣式、默認值:FontStyle.Normal |
fontWeight | number | FontWeight| string | 設置文本字體的粗細 number取值是[400,900],間隔是100,值越大越粗 string類型僅支持number類型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分別對應FontWeight中相應的枚舉值。 默認值:FontWeight.Normal |
fontFamily | string | Resource?? | 設置文本的字體列表。使用多個字體,使用“,”進行分割,優先級按順序生效。例如:“Arial,sans-serif |
2.1.1、通用屬性與文本樣式設置
@Entry
@Component
struct Index {build() {Row() {Column() {Text('Harmony OS').margin({bottom:15})Text('鴻蒙系統').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')}
}
2.1.2、文本對齊方式設置
@Entry
@Component
struct Index {build() {Row() {Column() {Text('Harmony OS').margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start) // 對齊方式.backgroundColor(0xE6F2FD)Text('鴻蒙系統').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')}
}
textAlign參數類型為TextAlign,定義了幾種類型
- Start:默認值,水平對齊首部
- Center:水平居中對齊
- End:水平對齊尾部
2.1.3、設置文本超長顯示
當文本的內容過多超出了Text組件范圍時,可以使用textOverflow設置文本截取方式,配合maxLines使用,單獨設置不生效
maxLines用來設置文本顯示的最大行數
如果把textOverflow設置為Ellipsis,那么它會把顯示不下的文本使用“...”表示
@Entry
@Component
struct Index {build() {Row() {Column() {Text('Harmony OS').margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)Text('鴻蒙系統').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom:15})Text('濱海昌正企業管理有限公司成立于2011年,主要從事母嬰行業品牌開發與銷售,是集產品研發、品牌運營、銷售服務及物流供應鏈為一體的公司。現有團隊人數800人,其中管理人員100+人。').fontSize(18)// 文本超長顯示設置使用textOverflow配合maxLines一起使用.maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')}
}
2.1.4、設置文本裝飾線
使用decoration設置文本的裝飾線樣式及其顏色
它包含兩個參數:type用來指定裝飾線的樣式,其參數類型是TextDecorationType;color用來指定裝飾線的顏色,其參數類型是Color,它是一個可選參數。
@Entry
@Component
struct Index {build() {Row() {Column() {Text('Harmony OS').margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start) // 設置文本對齊方式.backgroundColor(0xE6F2FD).fontSize(20).decoration({type: TextDecorationType.Underline, color: Color.Black}) // 設置文本裝飾線Text('鴻蒙系統').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom:15})Text('濱海昌正企業管理有限公司成立于2011年,主要從事母嬰行業品牌開發與銷售,是集產品研發、品牌運營、銷售服務及物流供應鏈為一體的公司。現有團隊人數800人,其中管理人員100+人。').fontSize(18)// 超長文本使用textOverflow與maxLines配合設置.maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')}
}
TexDecorationType包含以下幾種類型:
- None:表示不使用裝飾線
- Overline:表示使用上劃線裝飾
- LineThrough:表示使用刪除線來裝飾
- Underline:表示使用下劃線裝飾
2.2、Image
Image組件用來渲染展示圖片,只需要給定圖片地址、寬和高,圖片就可以加載出來
@Entry
@Component
struct Test {build() {Row() {Column() {Image($r("app.media.icon")).width(100).height(100)}.width('100%')}.height('100%')}
}
2.2.1、設置圖片的縮放類型
圖片資源放在項目的:src/main/resources/base/media?目錄
為了使用圖片在頁面中有更好的顯示效果,有時候需要對圖片進行縮放處理。
可以使用objectFit屬性來設置圖片的縮放類型,其參數的類型是ImageFit。
@Entry
@Component
struct Test {build() {Row() {Column() {Image($r("app.media.image")).objectFit(ImageFit.Cover) // 默認的縮放方式.width(200).height(300).backgroundColor(0xCCCCCC)}.width('100%')}.height('100%')}
}
ImageFit包含如下幾種類型:
- Contain:保持寬高比進行縮小或放大,使用得圖片完全顯示在顯示邊界中
- Cover:默認值,保持寬高比進行縮小或放大,使得圖邊兩邊都大于或等于顯示邊界
- Auto:自適應顯示
- Fill:不保持寬高比進行放大或縮小,使用圖片充滿顯示邊界
- ScaleDown:保持寬高比顯示,圖片縮小或者保持不變
- None:保持原極尺寸顯示
2.2.2、加載網絡圖片
如果需要加載網絡圖片需要在module.json5中申請網絡訪問權限
{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]}
}
@Entry
@Component
struct Test {build() {Row() {Column() {Image($r("app.media.image")).objectFit(ImageFit.Contain) // 默認的縮放方式.width(200).height(300).backgroundColor(0xCCCCCC).margin({bottom:15})// 加載網圖圖片Image('https://p1.itc.cn/q_70/images03/20210217/d74ec9f0a1dc431a87c5cb4742ee17b1.jpeg').width(200).height(200)}.width('100%')}.height('100%')}
}
2.3、TextInput
TextInput組件用來輸入單行文本,響應輸入事件。
@Entry
@Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.height('100%')}
}
與Text組件一樣,也支持文本樣式的設置。
2.3.1、設置輸入提示語
要在輸入框中添加提示語可以使用placeholder屬性來實現,同時還可以使用placeholderColor和placeholderFont來分別設置提示文本的顏色和樣式。
@Entry
@Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom: 15})TextInput({placeholder: '請輸入賬號'}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic})}.width('100%')}.height('100%')}
}
2.3.2、設置輸入類型
可以使用type屬性來設置輸入框類型。其類型是InputType
@Entry
@Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom: 15})TextInput({placeholder: '請輸入賬號'}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: '請輸入密碼'}).type(InputType.Password) // 指定輸入的類型}.width('100%')}.height('100%')}
}
InputType包含以下幾種輸入類型:
- Normal:基本輸入模式。支持輸入數字、字母、下劃線、空格、特殊字符
- Password:密碼輸入模式
- Email:e-mail地址輸入模式
- Number:純數字輸入模式
2.3.3、設置光標的位置
@Entry
@Component
struct TextInputTest {controller: TextInputController = new TextInputController();build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom: 15})TextInput({placeholder: '請輸入賬號'}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: '請輸入密碼'}).type(InputType.Password) // 指定輸入的類型.margin({bottom: 15})TextInput({controller: this.controller}).margin({bottom: 15})Button('設置光標的位置').onClick(() => {this.controller.caretPosition(2) // 設置光標的位置在第二個字符之后})}.width('100%')}.height('100%')}
}
上面使用了TextInputColler的caretPosition方法來設置光標所在的位置。
2.3.4、獲取輸入文本
可以給TextInput設置onChange事件,輸入文本發生變化時觸發回調,從而拿到輸入框中的文本信息。
@Entry
@Component
struct TextInputTest {controller: TextInputController = new TextInputController();@State username: string = ''; // 保存用戶輸入的賬號build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin({bottom: 15})TextInput({placeholder: '請輸入賬號'}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: '請輸入密碼'}).type(InputType.Password) // 指定輸入的類型.margin({bottom: 15})TextInput({controller: this.controller}).margin({bottom: 15})Button('設置光標的位置').onClick(() => {this.controller.caretPosition(2) // 設置光標的位置在第二個字符之后}).margin({bottom: 15})TextInput({placeholder: 'username'}).caretColor(Color.Blue) // 光標的顏色.onChange((value: string) => {this.username = value;}).margin({bottom: 15})Text(this.username)}.width('100%')}.height('100%')}
}
2.4、Button
Button組件主要用來響應點擊操作,可以包含子組件。
@Entry
@Component
struct ButtonTest {build() {Row() {Column() {Button('登錄',{type: ButtonType.Capsule, stateEffect: true}).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}
2.4.1、按鈕樣式
type用來定義按鈕的樣式,其類型是ButtonType
stateEffect用于設置按鈕按下時是否開啟切換效果,當狀態為false時,點擊效果關閉,默認值為true
type的樣式可以有如下:
- Capsule:膠囊型按鈕(圓角默認是高度的一半)
- Circle:圓形按鈕
- Normal:普通按鈕(默認,不帶圓角)
2.4.2、按鈕點擊事件
可以給Button綁定onClick事件,當用戶點擊Button的時候,則會執行onClick方法,調用其中的邏輯代碼。
@Entry
@Component
struct ButtonTest {@State text: string = '';@State isShow: boolean = false;build() {Row() {Column() {TextInput({placeholder:'請輸入內容'}).margin({bottom: 15}).onChange((value: string) => {this.isShow = false;this.text = value;})Button('登錄',{type: ButtonType.Capsule, stateEffect: true}).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF').margin({bottom: 15}).onClick(() => { // 綁定按鈕點擊事件this.isShow = !this.isShow;})if(this.isShow) {Text(this.text);}}.width('100%')}.height('100%')}
}
2.4.3、包含子組件按鈕
@Entry
@Component
struct ButtonTest {@State text: string = '';@State isShow: boolean = false;build() {Row() {Column() {TextInput({placeholder:'請輸入內容'}).margin({bottom: 15}).onChange((value: string) => {this.isShow = false;this.text = value;})Button('登錄',{type: ButtonType.Capsule, stateEffect: true}).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF').margin({bottom: 15}).onClick(() => { // 綁定按鈕點擊事件this.isShow = !this.isShow;})if(this.isShow) {Text(this.text).margin({bottom: 15})}Button({type: ButtonType.Circle, stateEffect: true}) {// 子組件,在其中放置一個圖片Image($r('app.media.delete')).width(32).height(32)}.width(64).height(64).backgroundColor(0x317aff)}.width('100%')}.height('100%')}
}
2.5、LoadingProgress
這個組件用來顯示加載進度。
@Entry
@Component
struct LoadingTest {build() {Row() {Column() {LoadingProgress().color(Color.Blue).height(64).width(64)}.width('100%')}.height('100%')}
}
3、資源引用
Resource是資源引用類型,用于設置組件屬性的值。
資源文件(字符串、圖片、音頻……)統一存放在resources目錄下。
開發者可以根據屏幕尺寸呈現不同的局效果,根據語言不同使用不同的字符串。
@Entry
@Component
struct ResourceTest {build() {Row() {Column() {Button('登錄', {type: ButtonType.Capsule, stateEffect: true}).width(300).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}
上面的按鈕則是寫死的,我們可以把相應的資源存放在對應的資源文件中
資源文件的目錄:entry/src/main/resources
string.json用來存放字符串資源
{"string": [{"name": "login_text","value": "登錄"}]
}
同時對于字符串資源需要在en_US,zh_CN目錄下對應加上這個login_text鍵對應的值
en_US目錄下的string.json
{"string": [{"name": "login_text","value": "login"}]
}
zh_CN目錄下的string.json
{"string": [{"name": "login_text","value": "登錄"}]
}
在float.json中新增如下鍵值對
{"float": [{"name": "button_width","value": "300vp"},{"name": "button_height","value": "40vp"},{"name": "login_fontSize","value": "18fp"}]
}
在color.json中新增一個鍵button_color
{"color": [{"name": "start_window_background","value": "#FFFFFF"},{"name": "button_color","value": "#1890ff"}]
}
配置了上面這些資源后,在使用時就中以以$r('app.type.name')的形式引用應用資源。
type代表資源的類型(或者是資源的存放位置)可以取值是:color,float,string,plural,media
name代表資源的命名
通過引用資源代碼可以修改為如下:
@Entry
@Component
struct ResourceTest {build() {Row() {Column() {Button($r('app.string.login_text'), {type: ButtonType.Capsule, stateEffect: true}).width($r('app.float.button_width')).height($r('app.float.button_height')).fontSize($r('app.float.login_fontSize')).fontWeight(FontWeight.Medium).backgroundColor($r('app.color.button_color'))}.width('100%')}.height('100%')}
}