HarmonyOS開發(五):常用基礎組件

1、組件介紹

組件(Component),是界面搭建及顯示的最小單元。

組件根據功能可以分為五大類:基礎組件、容器組件、媒體組件、繪制組件、畫布組件

2、基礎組件

基礎組件是視圖層的基本組成單元,它包含:Text、Image、TextInput、Button、LoadingProgress……

2.1、Text

Text組件可以在界面上展示一段文本信息,它可以包含子組件Span。

對于包含文本文本元素的組件(如:Text,Span,Button,TextInput……)可以使用fontSize(),fontColor(),fontWeight(),fontFamily(),fontStyle()這些文本樣式設置文本的大小、顏色、粗細、字體等信息。

名稱參數類型描述
fontColorResourceColor設置文本顏色
fontSizeLength | Resource設置文本尺寸,Length為number類型時,使用fp單位
fontStyleFontStyle設置文本的字體樣式、默認值:FontStyle.Normal
fontWeightnumber | FontWeight| string

設置文本字體的粗細

number取值是[400,900],間隔是100,值越大越粗

string類型僅支持number類型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分別對應FontWeight中相應的枚舉值。

默認值:FontWeight.Normal

fontFamilystring | 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%')}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/160236.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/160236.shtml
英文地址,請注明出處:http://en.pswp.cn/news/160236.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

OpenCV C++ 張正友相機標定【相機標定原理、相機標定流程、圖像畸變矯正】

文章目錄 3.1 標定原理3.2 相機標定流程步驟1:采集棋盤格圖像,批處理(調整尺寸、重命名)步驟2:提取棋盤格內角點坐標步驟3:進一步提取亞像素角點信息在棋盤標定圖上繪制找到的內角點(非必須,僅為了顯示)步驟4:相機標定--計算出相機內參數矩陣和畸變系數步驟5:畸變圖像…

Spring (二)@Order, Ordered 失效

Spring (二)Order, Ordered 失效 先上例子 public class OrderAnnotationExample {Order(2)static class MyBeanFactoryPostProcessor1 implements BeanFactoryPostProcessor {Overridepublic void postProcessBeanFactory(ConfigurableListableBeanFa…

如何加速JavaScript 代碼運行速度

如何加速JavaScript 代碼運行速度 前言減少DOM訪問避免不必要的變量延遲script加載異步和同步使用異步編程避免使用With關鍵詞 前言 本文主要通過五個方面來講解如何使Js代碼得到性能優化,從而實現加快Js代碼運行速度的作用。那么好,本文正式開始。 減…

感染了后綴為.[bkpsvr@firemail.cc].EKING勒索病毒如何應對?數據能夠恢復嗎?

導言: 在當前數字時代,勒索病毒成為網絡威脅的一大隱患。本文將深入介紹一種名為[bkpsvrfiremail.cc].EKING的勒索病毒,以及如何應對遭受其攻擊后,有效地恢復被加密的數據文件,并提供一些預防措施以減少感染的風險。數…

sqlserver==索引解析,執行計劃,索引大小

1創建測試表 -- 創建大型表 CREATE TABLE LargeTableWithIndex (ID int IDENTITY(1,1) PRIMARY KEY,IndexedColumn int,NonIndexedColumn nvarchar(255),OtherData nvarchar(255) );2插入測試數據 -- 使用 T-SQL 插入大量數據 DECLARE @i int = 1; WHILE @i <= 100000 -- …

Mac中LaTex無法編譯的問題

最近在使用TexStudio時&#xff0c;遇到一個棘手的問題&#xff1a; 無法編譯&#xff0c;提示如下&#xff1a; kpathsea: Running mktexfmt xelatex.fmt /Library/TeX/texbin/mktexfmt: kpsewhich -var-valueTEXMFROOT failed, aborting early. BEGIN failed–compilation a…

[Linux] Network: IPv6 link-local 地址是否可用不自動生成

原來有一段時間在做擴充產品的VLAN個數&#xff0c;然后就遇到過一個問題&#xff1a;說這個Linux的默認配置里&#xff0c;會為每一個網絡接口添加一個link-local的地址&#xff0c;就是FE80::開頭的地址&#xff0c;在RFC-4291里有如下的定義&#xff1a; Link-Local unicas…

redis運維(十二) 位圖

一 位圖 ① 概念 1、說明&#xff1a;位圖還是在操作字符串2、位圖玩字符串在內存中存儲的二進制3、ASCII字符通過映射轉化為二進制4、操作的是字符串value ② ASCII字符鋪墊 1、控制ASCII字符 2、ASCII可顯示字符 ③ SETBIT 細節&#xff1a; setbit 命令的返回值是之…

git常用命令(git github ssh)

目錄 1、語法說明2、本地倉庫相關操作建立一個git文件(git init)把工作區的文件添加到暫存區(git add)把暫存區的文件添加到本地倉庫(git commit)查看暫存區和本地倉庫中的文件(git ls-files)查看文件夾下所有文件的狀態(git status)查看版本庫中的提交記錄(git log)恢復的文件…

如何解決msvcp110.dll丟失問題,分享5個有效的解決方法

最近&#xff0c;我在使用電腦時遇到了一個令人頭疼的問題——msvcp110.dll丟失。這個錯誤通常會導致某些應用程序無法正常運行。為了解決這個問題&#xff0c;我們需要采取一些有效的方法來修復丟失的msvcp110.dll文件。那么&#xff0c;msvcp110.dll到底是什么呢&#xff1f;…

代碼隨想錄 10.14 || 二叉樹 LeetCode 669.修剪二叉搜索樹、108.將有序數組轉換為二叉搜索樹、538.將二叉搜索樹轉為累加樹

669.修剪二叉搜索樹 根據給定的最小邊界 left 和最大邊界 right 修剪二叉搜索樹&#xff0c;保留值在 left ~ right 的節點&#xff0c;刪除不滿足此條件的節點。修剪樹不應該改變保留在樹中的元素的相對結構&#xff0c;即父子關系。 設 cur 為當前訪問的二叉樹節點&#xff0…

LeetCode(32)串聯所有單詞的子串【滑動窗口】【困難】(含圖解)

目錄 1.題目2.答案3.提交結果截圖4.圖解 鏈接&#xff1a; 串聯所有單詞的子串 1.題目 給定一個字符串 s 和一個字符串數組 words。 words 中所有字符串 長度相同。 s 中的 串聯子串 是指一個包含 words 中所有字符串以任意順序排列連接起來的子串。 例如&#xff0c;如果 w…

Flutter的Event Loop

Flutter 的事件循環機制是其框架的核心部分&#xff0c;它負責管理事件的處理和UI的渲染。了解這個機制對于開發高效且響應迅速的Flutter應用非常重要。以下是Flutter事件循環的主要組成部分和工作原理&#xff1a; 1. 主事件循環&#xff08;Main Event Loop&#xff09; 當…

利用ros實現單片機通訊(轉載)

我覺得如果使用這個人的micro_ros通信協議&#xff0c;就不用再去Ubuntu或者Windows上面自己寫驅動程序了&#xff0c; 利用micro_ros實現esp32與ros2的通訊 Tianci ? 天津大學 工學博士 參考&#xff1a;https://github.com/micro-ROS/micro_ros_arduino https://blog.cs…

B站app作品列表sign

之前寫過一篇pc的:B站pc端w_rid逆向 最近pc端老是作妖,更新的太頻繁了, 于是決定干一下app, pc端有個w_rid加密,app端也有個類似的sign 人狠話不多,直接上成果吧: # -*- coding: UTF-8 -*- import hashlib import time import requests import json from urllib.parse…

C語言好好題(一維數組)

兩天沒有更新了&#xff0c;貼紙們&#xff0c;有沒有想我呀。&#x1f604;&#x1f604;&#x1f604; 好了&#xff0c;就寒暄到這里吧&#xff0c;下面請看題&#xff1a; 有序序列判斷 輸入一個整數序列&#xff0c;判斷是否是有序序列&#xff0c;有序&#xff0c;指序列…

騰訊云輕量4核8G12M帶寬服務器租用價格和S5實例報價

騰訊云4核8G服務器優惠價格表&#xff0c;云服務器CVM標準型S5實例4核8G配置價格15個月1437.3元&#xff0c;5年6490.44元&#xff0c;輕量應用服務器4核8G12M帶寬一年446元、529元15個月&#xff0c;阿騰云atengyun.com分享騰訊云4核8G服務器詳細配置、優惠價格及限制條件&…

C++(模板進階)

目錄 前言&#xff1a; 本章學習目標&#xff1a; 1.非類型模版參數 1.1使用方法 1.2注意事項 1.3 實際引用 2.模版特化 2.1概念 2.2函數模板特化 2.3類模板特化 2.3.1全特化 2.3.2偏特化 3.模版分離編譯 ?編輯 3.1失敗原因 ?編輯 3.2解決方案 4 總結 前言&…