#Dayu200體驗官#第二章 openharmony eTS之常用控件
一、eTS之 Text控件講解
1、Text參數
Text(content?: string)
| 參數名 | 參數類型 | 必填 | 預設值 | 參數描述 |
|---|---|---|---|---|
| content | string | 否 | "" | 文本内容，包含子元件Span時不生效，顯示Span内容。 |
2、Text屬性
| 名稱 | 參數類型 | 預設值 | 描述 |
|---|---|---|---|
| textAlign | TextAlign | TextAlign.Start | 設定多行文本的文本對齊方式。 |
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | 設定文本超長時的顯示方式。 說明： 文本截斷是按字截斷。例如，英文以單詞為最小機關進行截斷，若需要以字母為機關進行截斷，可在字母間添加零寬空格：\u200B。 |
| maxLines | number | Infinity | 設定文本的最大行數。 |
| lineHeight | Length | - | 設定文本的文本行高，設定值不大于0時，不限制文本行高，自适應字型大小，Length為number類型時機關為fp。 |
| decoration | { type: TextDecorationType, color?: Color } | { type: TextDecorationType.None, color：Color.Black } | 設定文本裝飾線樣式及其顔色。 |
| baselineOffset | Length | - | 設定文本基線的偏移量。 |
| textCase | TextCase | TextCase.Normal | 設定文本大小寫。 |
- TextAlign枚舉說明
名稱 描述 Center 文本居中對齊。 Start 根據文字書寫相同的方向對齊。 End 根據文字書寫相反的方向對齊。 - TextOverflow枚舉說明
名稱 描述 Clip 文本超長時進行裁剪顯示。 Ellipsis 文本超長時顯示不下的文本用省略号代替。 None 文本超長時不進行裁剪。 - TextDecorationType枚舉說明
名稱 描述 Underline 文字下劃線修飾。 LineThrough 穿過文本的修飾線。 Overline 文字上劃線修飾。 None 不使用文本裝飾線。 - TextCase枚舉說明
名稱 描述 Normal 保持文本原有大小寫。 LowerCase 文本采用全小寫。 UpperCase 文本采用全大寫。
3、Text控件上手實戰
①、示例代碼：
@Entry
@Component
struct Textyukoyu {
@State srtText: string = "hello 51CTO";
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Hello World') //test控件使用示例1
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.srtText) //test控件使用示例2
.fontSize(60)
.fontWeight(FontWeight.Bold)
.fontColor("#e94674")
}
.width('100%')
.height('100%')
}
}
②、預覽器效果
二、eTS之 Button控件講解
1、 Button參數
-
Button(options?: {type?: ButtonType, stateEffect?: boolean})
表1 options參數說明
參數名 參數類型 必填 預設值 參數描述 type ButtonType 否 Capsule 描述按鈕風格。 stateEffect boolean 否 true 按鈕按下時是否開啟切換效果，當狀态置為false時，點選效果關閉。 -
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
使用文本内容建立相應的按鈕元件，此時Button無法包含子元件。
表2 value參數說明
參數名 參數類型 必填 預設值 參數描述 label string 否 - 按鈕文本内容。 options Object 否 - 見options參數說明。
2、 Button屬性
| 名稱 | 參數類型 | 預設值 | 描述 |
|---|---|---|---|
| type | ButtonType | Capsule | 設定Button樣式。 |
| stateEffect | boolean | true | 狀态切換時是否開啟切換效果，當狀态置為false時，點選效果關閉。 |
- ButtonType枚舉說明
名稱 描述 Capsule 膠囊型按鈕（圓角預設為高度的一半）。 Circle 圓形按鈕。 Normal 普通按鈕（預設不帶圓角）。
3、 Button控件上手實戰
①、示例代碼
@Entry
@Component
struct Buttonyukoyu {
@State srtbutton: string = "hello world!";
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.srtbutton)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() { //按鈕控件
Text('點選')
.fontSize(50)
.fontWeight(FontWeight.Bold)
}.type(ButtonType.Capsule)
.margin({
top: 200
})
.width('50%')
.height('10%')
.backgroundColor('#0D9FFB')
.onClick(() => { //點選事件
this.srtbutton = "hello 51CTO!"
})
}
.width('100%')
.height('100%')
}
}
②、預覽器效果
點選前：
點選後：
三、eTS之Image控件講解
1、 Image參數
Image(value: {uri: string | PixelMap})
權限：ohos.permission.INTERNET（使用網絡圖檔）
- 參數
參數名 參數類型 必填 預設值 參數描述 uri string 是 - 圖檔的uri，支援本地圖檔和網絡路徑。
2、 Image屬性
| 名稱 | 參數類型 | 預設值 | 描述 |
|---|---|---|---|
| alt | string | - | 加載時顯示的占位圖。支援本地圖檔和網絡路徑。 |
| objectFit | ImageFit | Cover | 設定圖檔的縮放類型。 |
| objectRepeat | ImageRepeat | NoRepeat | 設定圖檔的重複樣式。 > 說明： > - SVG類型圖源不支援該屬性。 |
| interpolation | ImageInterpolation | None | 設定圖檔的插值效果，僅針對圖檔放大插值。 > 說明： > - SVG類型圖源不支援該屬性。 > > - PixelMap資源不支援該屬性。 |
| renderMode | ImageRenderMode | Original | 設定圖檔渲染的模式。 > 說明： > - SVG類型圖源不支援該屬性。 |
| sourceSize | { width: number, height: number } | - | 設定圖檔解碼尺寸，将原始圖檔解碼成指定尺寸的圖檔，number類型機關為px。 > 說明： > PixelMap資源不支援該屬性。 |
| syncLoad8+ | boolean | false | 設定是否同步加載圖檔，預設是異步加載。同步加載時阻塞UI線程，不會顯示占位圖。 |
- ImageFit枚舉說明
名稱 描述 Cover 保持寬高比進行縮小或者放大，使得圖檔兩邊都大于或等于顯示邊界。 Contain 保持寬高比進行縮小或者放大，使得圖檔完全顯示在顯示邊界内。 Fill 不保持寬高比進行放大縮小，使得圖檔填充滿顯示邊界。 None 保持原有尺寸顯示。通常配合objectRepeat屬性一起使用。 ScaleDown 保持寬高比顯示，圖檔縮小或者保持不變。 - ImageInterpolation枚舉說明
名稱 描述 None 不使用插值圖檔資料。 High 高度使用插值圖檔資料，可能會影響圖檔渲染的速度。 Medium 中度使用插值圖檔資料。 Low 低度使用插值圖檔資料。 - ImageRenderMode枚舉說明
名稱 描述 Original 按照原圖進行渲染，包括顔色。 Template 将圖像渲染為模闆圖像，忽略圖檔的顔色資訊。
3、 Image控件上手實戰
①、代碼示例
@Entry
@Component
struct Imageyukoyu {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('image控件')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Image($r("app.media.icon")) //使用本地圖檔
.width(200)
.height(200)
.border({ width: 1 })
.borderStyle(BorderStyle.Dashed)
.syncLoad(false)
Image("http://www.news.cn/politics/leaders/2022-05/24/1128679005_16534016367591n.jpg") //網絡圖檔
.width(1080)
.height(400)
.border({ width: 1 })
.borderStyle(BorderStyle.Dashed)
.syncLoad(false)
}
.width('100%')
.height('100%')
}
}
②、使用網絡圖檔添加網絡權限
添加：
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
③、預覽器效果