HarmonyOS4.0開發應用——【ArkUI組件使用】

ArkUI組件使用

這里會詳細演示以下組件使用:

  • Image
  • Text
  • TextInput
  • Button
  • Slider
  • Column&&Row
  • List
  • 自定義組件以及相關函數使用

Image

可以是網絡圖片、可以是本地圖片、也可以是像素圖

 Image("https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2").width(200).interpolation(ImageInterpolation.High)

加載網絡圖片真機上需要申請網絡訪問權限: 在module.json5文件中module對象中編寫

"requestPermissions": [{"name": "ohos.permission.INTERNET"}],

這樣真機才能加載網絡圖片

Text

用于顯示文本，支持直接填寫、也支持讀取本地資源文件(用于多語言)

TextInput

輸入框,通過設置type屬性可以是密碼輸入框、數字輸入框、文本輸入框等

  • Normal：基本輸入
  • Password：密碼輸入
  • Email: 郵箱輸入
  • Number:數字輸入 -PhoneNumber: 電話號碼輸入

通過onChange事件可以實現自己想要的交互

Button

按鈕,通過設置type屬性可以是不同的按鈕類型

  • Capsule:膠囊性
  • Circle: 圓形
  • Normal:普通按鈕

Slider

滑塊組件使用

通過上方屬性可以進行配置使用，在onChange方法內可以實現自己的交互

Column&&Row布局

通過這個可以實現位置布局

  • justifyContent:設置子元素在主軸方向的對齊格式
  • alignItem:設置子元素在交叉軸方向的對齊格式

Column

Row

布局案例(控制圖片大小)

Divider分割線

@Entry
@Component
struct Index {@State imageWidth: number = 30build() {Column() {Row(){Image("https://i2.hdslb.com/bfs/archive/6c8d928748fcfa5b3366d141f7f3b08008fdd416.jpg@672w_378h_1c_!web-home-common-cover.webp").width(this.imageWidth).interpolation(ImageInterpolation.High)}.width('100%').height(400).justifyContent(FlexAlign.Center)Row(){Text($r('app.string.width_label')).fontSize(30).fontWeight('bold')TextInput({placeholder:"請輸入圖片寬度",text:this.imageWidth.toString()}).width(200).backgroundColor("red").type(InputType.Number).onChange(value=>{this.imageWidth=parseInt(value)})}.width("100%").padding({left:14,right:14}).justifyContent(FlexAlign.SpaceBetween)Divider().width("91%").margin(20)Row(){Button('縮小').width(80).fontSize(20).onClick(()=>{this.imageWidth-=5;})Button('放大').width(80).fontSize(20).onClick(()=>{this.imageWidth+=5;})}.justifyContent(FlexAlign.SpaceEvenly).width('100%')Divider().width("91%").margin(20)Slider({min:100,max:300,value:this.imageWidth,step:10}).width("100%").blockColor("red").trackThickness(8).showTips(true).onChange(val=>{this.imageWidth=val})}.width('100%').height('100%')}
}

List

列表組件，超出可滾動組件

  • 使用之前了解一下渲染控制
  • forEach
  • if-else

通過以上可遍歷多個item展示，不通過list無法超出滾動 以下通過List修飾實現一個訂單列表(通過if-else決定條件渲染)：

  private items:Array<ItemList>=[new ItemList('華為Mate60','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',99),new ItemList('華為Mate61','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',199,20),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39)]build() {Column() {//頭部Row(){Text("商品列表").fontSize(30).fontWeight("bold")}.width('100%').height(30).margin({bottom:20})List({space:8}){ForEach(this.items,(item: ItemList)=>{ListItem() {Row({space:10}){Image(item.image).width(100)Column({space:4}){if(item.discount){Text(item.name).fontSize(20).fontWeight('bold')Text(`原價：￥${item.price}`).fontSize(14).fontColor('#CCC').decoration({type:TextDecorationType.LineThrough})Text(`折扣價：￥${item.price-item.discount}`).fontSize(18).fontWeight('bold').fontColor('red')Text(`補貼：￥${item.discount}`).fontSize(18).fontColor('red')}else{Text(item.name).fontSize(20).fontWeight('bold')Text(`￥${item.price}`).fontSize(18).fontColor('red')}}.height('100%').alignItems(HorizontalAlign.Start)}.width("100%").backgroundColor('#FFF').borderRadius(20).height(120).padding(10).borderRadius(10 ).margin(20)}})}.width("100%").layoutWeight(1)}.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)}
}

自定義組件以及相關函數使用

將上方示例進行拆解實現組件封裝~

1.將頂部欄進行封裝,新建文件進行編寫，或者在內部編寫封裝，這里我封裝成公用的


@Component
export struct Header{private title:ResourceStrbuild(){Row(){Text('返回').fontSize(25)Text(this.title).fontSize(30).fontWeight("bold")Blank()Text('刷新').fontSize(25).fontWeight('bold')}.width('100%').height(30)}
}

使用:

import {Header} from "../components/Headers"

引入直接使用即可 再將列表封裝，這里就直接封裝成自定義構建函數

//全局自定義構建函數
@Builder function ItemCard(item:ItemList){Row({space:10}){Image(item.image).width(100)Column({space:4}){if(item.discount){Text(item.name).fontSize(20).fontWeight('bold')Text(`原價：￥${item.price}`).fontSize(14).fontColor('#CCC').decoration({type:TextDecorationType.LineThrough})Text(`折扣價：￥${item.price-item.discount}`).fontSize(18).fontWeight('bold').fontColor('red')Text(`補貼：￥${item.discount}`).fontSize(18).fontColor('red')}else{Text(item.name).fontSize(20).fontWeight('bold')Text(`￥${item.price}`).fontSize(18).fontColor('red')}}.height('100%').alignItems(HorizontalAlign.Start)}.width("100%").backgroundColor('#FFF').borderRadius(20).height(120).padding(10).borderRadius(10 ).margin(20)
}

再封裝個全局的公共樣式函數

//全局公共樣式函數
@Styles function fillScreen(){.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)
}

最后整合代碼

class ItemList{name:stringimage: ResourceStrprice: numberdiscount: numberconstructor(name:string,image: ResourceStr,price:number,discount:number=0) {this.name=namethis.image=imagethis.price=pricethis.discount=discount}
}
import {Header} from "../components/Headers"//全局自定義構建函數
@Builder function ItemCard(item:ItemList){Row({space:10}){Image(item.image).width(100)Column({space:4}){if(item.discount){Text(item.name).fontSize(20).fontWeight('bold')Text(`原價：￥${item.price}`).fontSize(14).fontColor('#CCC').decoration({type:TextDecorationType.LineThrough})Text(`折扣價：￥${item.price-item.discount}`).fontSize(18).fontWeight('bold').fontColor('red')Text(`補貼：￥${item.discount}`).fontSize(18).fontColor('red')}else{Text(item.name).fontSize(20).fontWeight('bold')Text(`￥${item.price}`).fontSize(18).fontColor('red')}}.height('100%').alignItems(HorizontalAlign.Start)}.width("100%").backgroundColor('#FFF').borderRadius(20).height(120).padding(10).borderRadius(10 ).margin(20)
}
//全局公共樣式函數
@Styles function fillScreen(){.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)
}
@Entry
@Component
struct ItemPage {private items:Array<ItemList>=[new ItemList('華為Mate60','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',99),new ItemList('華為Mate61','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',199,20),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),new ItemList('華為Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39)]build() {Column() {//頭部Header({title:"商品列表"}).margin({bottom:20})List({space:8}){ForEach(this.items,(item: ItemList)=>{ListItem() {ItemCard(item)}})}.width("100%").layoutWeight(1)}.fillScreen()}
}

這樣即可實現組件式開發，學過前端的基本都有這樣的概念

總結自定義組件使用

通過以上內容即可學會ArkUI組件的基本使用了。

為了能讓大家更好的學習鴻蒙 (Harmony OS) 開發技術，這邊特意整理了《鴻蒙 (Harmony OS)開發學習手冊》（共計890頁），希望對大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙 (Harmony OS)開發學習手冊》

入門必看：https://qr21.cn/FV7h05

  1. 應用開發導讀(ArkTS)
  2. 應用開發導讀(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系統定義
  2. 技術架構
  3. 技術特性
  4. 系統安全

如何快速入門：https://qr21.cn/FV7h05

  1. 基本概念
  2. 構建第一個ArkTS應用
  3. 構建第一個JS應用
  4. ……

開發基礎知識：https://qr21.cn/FV7h05

  1. 應用基礎知識
  2. 配置文件
  3. 應用數據管理
  4. 應用安全管理
  5. 應用隱私保護
  6. 三方應用調用管控機制
  7. 資源分類與訪問
  8. 學習ArkTS語言
  9. ……

基于ArkTS 開發：https://qr21.cn/FV7h05

  1. Ability開發
  2. UI開發
  3. 公共事件與通知
  4. 窗口管理
  5. 媒體
  6. 安全
  7. 網絡與鏈接
  8. 電話服務
  9. 數據管理
  10. 后臺任務(Background Task)管理
  11. 設備管理
  12. 設備使用信息統計
  13. DFX
  14. 國際化開發
  15. 折疊屏系列
  16. ……

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

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

相關文章

MySQL GTID詳解

MySQL GTID詳解

概念 GTID 全局事務唯一標識&#xff08; global transaction identifier&#xff09; 格式 單個GTID由兩部分組成 &#xff0c;用冒號分割&#xff1b;前面一部分為server_uuid&#xff0c;后面一部分transaction_id是由事務在源上提交的順序確定的序列號 GTID server_u…
閱讀更多...
免費熱門的API大全整理

免費熱門的API大全整理

實人認證&#xff08;人像三要素&#xff09;&#xff1a;輸入姓名、身份證號碼和一張人臉照片&#xff0c;與公安庫身份證頭像進行權威比對&#xff0c;返回比對分值。實名認證&#xff08;身份證二要素&#xff09;&#xff1a;核驗身份證二要素&#xff08;姓名和身份證號碼…
閱讀更多...
CLIP在Github上的使用教程

CLIP在Github上的使用教程

CLIP的github鏈接&#xff1a;https://github.com/openai/CLIP CLIP Blog&#xff0c;Paper&#xff0c;Model Card&#xff0c;Colab CLIP&#xff08;對比語言-圖像預訓練&#xff09;是一個在各種&#xff08;圖像、文本&#xff09;對上進行訓練的神經網絡。可以用自然語…
閱讀更多...
鴻蒙HarmonyOS(ArkTS)語法 聲明變量及注意事項

鴻蒙HarmonyOS(ArkTS)語法 聲明變量及注意事項

好 今天我們來看一個基礎的harmonyOS語法 變量聲明 這里 我們還是用 ArkTS項目 我們聲明變量的語法并不是ArkTS的 而是 javaScript 和 TypeScript的 可以看一下下面一張圖 js是最初弱類型語言 于是TS作為js的副類 是一種更嚴謹的數據限定語法 而ArkTS 是TS的改良版 其實我們…
閱讀更多...
算法通關村第十八關 | 白銀 | 回溯熱門問題

算法通關村第十八關 | 白銀 | 回溯熱門問題

1.組合總和問題 原題&#xff1a;力扣39. 元素可以重復拿取&#xff0c;且題目的測試用例保證了組合數少于 150 個。 class CombinationSum {List<List<Integer>> res new ArrayList<>();List<Integer> path new ArrayList<>();public List…
閱讀更多...
一篇文章教你快速弄懂 web自動化測試中的三種等待方式

一篇文章教你快速弄懂 web自動化測試中的三種等待方式

前言 現在的網頁很多都是動態加載的&#xff0c;如果頁面的內容發生了改變&#xff0c;就需要時間來渲染。在咱們做web自動化測試的時候&#xff0c;由于代碼是自動執行的&#xff0c;代碼在執行的時候&#xff0c;有可能上一步操作而加載的元素還沒加載出來&#xff0c;就會報…
閱讀更多...
配置本地端口鏡像示例（1：1）

配置本地端口鏡像示例（1：1）

本地端口鏡像簡介 本地端口鏡像是指觀察端口與監控設備直接相連&#xff0c;觀察端口直接將鏡像端口復制來的報文轉發到與其相連的監控設備進行故障定位和業務監測。 配置注意事項 觀察端口專門用于鏡像報文的轉發&#xff0c;因此不要在上面配置其他業務&#xff0c;防止鏡像…
閱讀更多...
建筑學VR虛擬仿真情景實訓教學

建筑學VR虛擬仿真情景實訓教學

首先&#xff0c;建筑學VR虛擬仿真情景實訓教學為建筑學專業的學生提供了一個身臨其境的學習環境。通過使用VR仿真技術&#xff0c;學生可以在虛擬環境中觀察和理解建筑結構、材料、設計以及施工等方面的知識。這種教學方法不僅能幫助學生更直觀地理解復雜的建筑理論&#xff0…
閱讀更多...
記錄 | ubuntu源碼編譯安裝/更新boost版本

記錄 | ubuntu源碼編譯安裝/更新boost版本

一、卸載當前的版本 1、查看當前安裝的boost版本 dpkg -S /usr/include/boost/version.hpp通過上面的命令&#xff0c;你就可以發現boost的版本了&#xff0c;查看結果可能如下&#xff1a; libboost1.54-dev: /usr/include/boost/version.hpp 2、刪除當前安裝的boost sudo …
閱讀更多...
記錄 | 使用samba將ubuntu文件夾映射到windows實現共享文件夾

記錄 | 使用samba將ubuntu文件夾映射到windows實現共享文件夾

一、ubuntu配置 1. 安裝 samba samba 是在 Linux 和 UNIX 系統上實現 SMB 協議的一個免費軟件&#xff0c;由服務器及客戶端程序構成。SMB&#xff08;Server Messages Block&#xff0c;信息服務塊&#xff09;是一種在局域網上共享文件和打印機的一種通信協議。 sudo apt-…
閱讀更多...
Excel COUNT類函數使用

Excel COUNT類函數使用

目錄 一. COUNT二. COUNTA三. COUNTBLANK四. COUNTIF五. COUNTIFS 一. COUNT ?用于計算指定范圍內包含數字的單元格數量。 基本語法 COUNT(value1, [value2], ...)?統計A2到A7所有數字單元格的數量 ?統計A2到A7&#xff0c;B2到B7的所有數字單元格的數量 二. COUNTA ?計…
閱讀更多...
大數據分析與應用實驗任務十一

大數據分析與應用實驗任務十一

大數據分析與應用實驗任務十一 實驗目的 通過實驗掌握spark Streaming相關對象的創建方法&#xff1b; 熟悉spark Streaming對文件流、套接字流和RDD隊列流的數據接收處理方法&#xff1b; 熟悉spark Streaming的轉換操作&#xff0c;包括無狀態和有狀態轉換。 熟悉spark S…
閱讀更多...
Linux 驅動開發需要掌握哪些編程語言和技術？

Linux 驅動開發需要掌握哪些編程語言和技術？

Linux 驅動開發需要掌握哪些編程語言和技術&#xff1f; 在開始前我有一些資料&#xff0c;是我根據自己從業十年經驗&#xff0c;熬夜搞了幾個通宵&#xff0c;精心整理了一份「Linux從專業入門到高級教程工具包」&#xff0c;點個關注&#xff0c;全部無償共享給大家&#xf…
閱讀更多...
1. mycat入門

1. mycat入門

1、mycat介紹 Mycat 是一個開源的分布式數據庫系統&#xff0c;但是由于真正的數據庫需要存儲引擎&#xff0c;而 Mycat 并沒有存 儲引擎&#xff0c;所以并不是完全意義的分布式數據庫系統。MyCat是目前最流行的基于Java語言編寫的數據庫中間件&#xff0c;也可以理解為是數據…
閱讀更多...
鴻蒙HarmonyOS4.0 入門與實戰

鴻蒙HarmonyOS4.0 入門與實戰

一、開發準備： 熟悉鴻蒙官網安裝DevEco Studio熟悉鴻蒙官網 HarmonyOS應用開發官網 - 華為HarmonyOS打造全場景新服務 應用設計相關資源： 開發相關資源： 例如開發工具 DevEco Studio 的下載 應用發布： 開發文檔：
閱讀更多...
3易懂AI深度學習算法:長短期記憶網絡（Long Short-Term Memory, LSTM）生成對抗網絡 優化算法進化算法

3易懂AI深度學習算法:長短期記憶網絡（Long Short-Term Memory, LSTM）生成對抗網絡 優化算法進化算法

繼續寫&#xff1a;https://blog.csdn.net/chenhao0568/article/details/134920391?spm1001.2014.3001.5502 1.https://blog.csdn.net/chenhao0568/article/details/134931993?spm1001.2014.3001.5502 2.https://blog.csdn.net/chenhao0568/article/details/134932800?spm10…
閱讀更多...
LeetCode 1631. 最小體力消耗路徑：廣度優先搜索BFS

LeetCode 1631. 最小體力消耗路徑：廣度優先搜索BFS

【LetMeFly】1631.最小體力消耗路徑&#xff1a;廣度優先搜索BFS 力扣題目鏈接&#xff1a;https://leetcode.cn/problems/path-with-minimum-effort/ 你準備參加一場遠足活動。給你一個二維 rows x columns 的地圖 heights &#xff0c;其中 heights[row][col] 表示格子 (ro…
閱讀更多...
視頻如何提取文字？這四個方法一鍵提取視頻文案

視頻如何提取文字？這四個方法一鍵提取視頻文案

視頻如何提取文字&#xff1f;你用過哪些視頻提取工具&#xff1f;視頻轉文字工具&#xff0c;又稱為語音識別軟件&#xff0c;是一款能夠將視頻中的語音或對話轉化為文字的實用工具。它運用了尖端的聲音識別和語言理解技術&#xff0c;能精準地捕捉視頻中的音頻&#xff0c;并…
閱讀更多...
弧形導軌的工作原理

弧形導軌的工作原理

弧形導軌是一種能夠將物體沿著弧形軌道運動的裝置&#xff0c;它由個弧形軌道和沿著軌道運動的物體組成&#xff0c;弧形導軌的工作原理是利用軌道的形狀和物體的運動方式來實現運動&#xff0c;當物體處于軌道上時&#xff0c;它會受到軌道的引導&#xff0c;從而沿著軌道的弧…
閱讀更多...
Nginx正則表達式

Nginx正則表達式

目錄 1.nginx常用的正則表達式 2.location location 大致可以分為三類 location 常用的匹配規則 location 優先級 location 示例說明 優先級總結 3.rewrite rewrite功能 rewrite跳轉實現 rewrite執行順序 語法格式 rewrite示例 實例1&#xff1a; 實例2&#xf…
閱讀更多...
最新文章

Copyright @ 2022~2023