HarmonyOS开辟（ArkUI简单使用）

tsx81429  论坛元老 | 2024-12-24 18:27:24 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1014|帖子 1014|积分 3042

一、开辟准备

1.官网 

https://developer.huawei.com/consumer/cn/
2.工具

DevEco Studio
下载： 下载中心 | 华为开辟者同盟-HarmonyOS开辟者官网，共建鸿蒙生态

3.安装


4.开辟组件ArkTs

ArkTS是HarmonyOS主力应用开辟语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的本领，让开辟者以更简便、更自然的方式开辟跨端应用。
5.快速上手


 


 6.ArkTS工程目次布局（Stage模子）



7.安装模仿器





 

 
解决步伐
首先打开控制面板 > 程序 > 程序与功能 > 启动或关闭Windows功能，找到并勾选“Hyper-V”、“Windows虚拟机监控程序平台”、“虚拟机平台”，点击确定并重启电脑。若勾选后启动模仿器仍然提示该错误，必要以管理员权限打开命令行窗口并实行：`bcdedit /set hypervisorlaunchtype auto`并重启电脑。
二、ArkUI

ArkUI（方舟UI框架）为应用的UI开辟提供了完备的基础设施，包括简便的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开辟者举行可视化界面开辟。
1.图片表现组件

a.声明Image组件并设置图片源 

  1. Image(src:string|PixelMap|Resource)
  3. Image('https://xxx.png')
  4. Image(PixelMapObject)
  5. Image($r('app.media.mate60'))
  6. Image($rawfile('mate60.png'))
复制代码
string格式，通常用来加载网络图片，必要申请网络访问权限：obos.permission.INTERNET
PixelMap格式，可以加载像素图，常用在图片编辑器中
Resource格式，加载本地图片，推荐使用
b.添加图片属性

  1. Image($r('app.media.icon'))
  2.     .width(100)
  3.     .height(120)
  4.     .borderRadius(10)
  5.     .interpolation(ImageInterpolation.High)
复制代码
2.文本表现组件

a.声明Text组件并设置文本内容

  1. Text(content?:string|Resource)
  3. Text('图片宽度')
  4. Text($r('app.string.width_label'))
复制代码
string格式，直接写文本内容
Resource格式，读取本地资源文件
 b.添加图片属性

  1. Text('注册账号')
  2.     .lineHeight(32)
  3.     .fontSize(20)
  4.     .fontColor('#ff1876f8')
  5.     .fontWeight(FontWeight.Medium)
复制代码
 3.文本输入框

a.声明TextInput组件

  1. TextInput({placeHolder?:ResourceStr,text?:ResourceStr})
  3. TextInput({placeHolder:'请输入账号或手机号'})
复制代码
placeHolder输入框无输入时的提示文本
text输入框当前的文本内容
 b.添加属性和事件

  1. TextInput({text:'请输入账号或手机号'})
  2.     .width(150)
  3.     .height(30)
  4.     .backgroundColor('#fff')
  5.     .type(InputType.Password)
  6.     .onChange(value=>{console.log(value)})
复制代码
 4.按钮输入框

a.声明Button组件,label是按钮文字

  1. Button(label?:ResourceStr)
  3. Button('点我')
  4. Button(){
  5.     Image($r('app.media.search))
  6.         .width(20)
  7.         .margin(10)
  8. }
复制代码
文字型按钮
自界说按钮，在Button组件内嵌套其他组件
 b.添加属性和事件

  1. Button('点我')
  2.     .width(100)
  3.     .height(30)
  4.     .type(ButtonType.Normal)
  5.     .onClick(()=>{})
复制代码
 5.滑动条组件

  1. Slider(options?:SilderOptions)
  3. Slider({
  4.      min:10,
  5.      max:100,
  6.      value:30,
  7.      step:10,
  8.      style:SliderStyle.OutSet,
  9.      direction:Axis.Horizontal,
  10.      reverse:false
  11. })
  12.      .width('90%')
  13.      .showTips(true)
  14.      .blockColor('#36d')
  15.      .onChange(()=>{})
复制代码
6.布局组件

Column容器从上往下分列
Row容器从左往右分列
间距：Space
7.示例


  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State imageWidth: number = 250;
  5.   build() {
  6.       Column() {
  7.         Row(){
  8.           Image('https://tse4-mm.cn.bing.net/th?id=OIP.nweYnRD-9eFP3nNgNDU9gwHaGt&pid=1.7&w=217&h=198&c=8&dpr=0.9')
  9.             .width(this.imageWidth)
  10.         }
  11.         .width('100%')
  12.         .height(400)
  13.         .justifyContent(FlexAlign.Center)
  14.         Row(){
  15.           Text($r('app.string.width_label'))
  16.             .fontSize(20)
  17.             .fontWeight(FontWeight.Bold)
  18.           TextInput({ placeholder: '请输入图片宽度', text: this.imageWidth.toFixed(0) })
  19.             .width(150)
  20.             .backgroundColor('#fff')
  21.             .type(InputType.Number)
  22.             .onChange(val=>{
  23.               console.log(val)
  24.               this.imageWidth=parseInt(val)
  25.             })
  26.         }
  27.         .width('100%')
  28.         .height(60)
  29.         .justifyContent(FlexAlign.SpaceAround)
  30.         Divider().width('91%')
  31.         Row(){
  32.           Button('缩小')
  33.             .width(80)
  34.             .height(30)
  35.             .type(ButtonType.Normal)
  36.             .onClick(()=>{
  37.               if(this.imageWidth>=10){
  38.                 this.imageWidth-=10
  39.               }
  40.             })
  41.           Button('放大')
  42.             .width(80)
  43.             .height(30)
  44.             .type(ButtonType.Normal)
  45.             .onClick(()=>{
  46.               if(this.imageWidth<=340){
  47.                 this.imageWidth+=10
  48.               }
  49.             })
  50.         }
  51.         .width('100%')
  52.         .height(60)
  53.         .justifyContent(FlexAlign.SpaceAround)
  54.         Slider({
  55.           min:10,
  56.           max:340,
  57.           value:this.imageWidth,
  58.           step:10,
  59.           style:SliderStyle.OutSet,
  60.           direction:Axis.Horizontal,
  61.           reverse:false
  62.         })
  63.           .width('90%')
  64.           .showTips(true)
  65.           .trackThickness(8)
  66.           .blockColor('#36d')
  67.           .onChange((val)=>{this.imageWidth=val})
  68.       }
  69.       .width('100%')
  70.       .height('100%')
  71.   }
  72. }
复制代码
 三、渲染控制（ForEach,if-else）

1.ForEach

a.语法

  1. ForEach(
  2.     //要遍历的数组数据
  3.     arr:Array,
  5.     //页面组件生成函数
  6.     (item:any,index?:number)=>{
  7.         Row(){
  8.             Image('mate60.jpg')
  9.             Column(){
  10.                 Text('mate60')
  11.                 Text('12700.00')
  12.             }
  13.         }
  14.     },
  16.     //键生成函数，为数组每一项生成一个唯一标识，组件是否重新渲染的判断标准
  17.     keyGenerator?:(item:any,index?:numbe):string=>{
  18.    
  19.     }
  20. )
复制代码
b.示例


  1. class Item {
  2.   name:string
  3.   image:ResourceStr
  4.   price:number
  5.   constructor( name:string, image:ResourceStr, price:number) {
  6.     this.name=name
  7.     this.image=image
  8.     this.price=price
  9.   }
  10. }
  11. @Entry
  12. @Component
  13. struct Index {
  14.   private items:Array<Item>=[
  15.     new Item('华为Mate60',$r('app.media.mate'),6999),
  16.     new Item('华为MateBookProX',$r('app.media.mate'),13999),
  17.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  18.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  19.     new Item('华为MateX5',$r('app.media.mate'),12999)
  20.   ]
  21.   build() {
  22.       Column({space:8}) {
  23.         Row(){
  24.           Text('商品列表')
  25.             .fontSize(20)
  26.             .fontWeight(FontWeight.Bold)
  27.         }
  28.         .width('100%')
  29.         .height(60)
  30.         .margin({bottom:20})
  32.         ForEach(
  33.           this.items,
  34.           (item:Item)=>{
  35.             Row({space:10}){
  36.               Image(item.image)
  37.                 .width('20%')
  38.               Column({space:4}){
  39.                 Text(item.name)
  40.                   .fontSize(20)
  41.                   .fontWeight(FontWeight.Bold)
  42.                 Text(`￥ ${item.price}`)
  43.                   .fontSize(20)
  44.                   .fontWeight(FontWeight.Bold)
  45.                   .fontColor('red')
  46.               }
  47.               .alignItems(HorizontalAlign.Start)
  48.             }
  49.             .width('92%')
  50.             .height(100)
  51.             .padding(10)
  52.             .backgroundColor('#fff')
  53.             .borderRadius(20)
  54.             .justifyContent(FlexAlign.Start)
  55.           }
  56.         )
  57.       }
  58.       .width('100%')
  59.       .height('100%')
  60.       .backgroundColor('#ccc')
  61.   }
  62. }
复制代码
 2.if-else条件渲染


  1. class Item {
  2.   name:string
  3.   image:ResourceStr
  4.   price:number
  5.   discount:number
  6.   constructor( name:string, image:ResourceStr, price:number,discount:number=0) {
  7.     this.name=name
  8.     this.image=image
  9.     this.price = price;
  10.     this.discount=discount
  11.   }
  12. }
  13. @Entry
  14. @Component
  15. struct Index {
  16.   private items:Array<Item>=[
  17.     new Item('华为Mate60',$r('app.media.mate'),6999,500),
  18.     new Item('华为MateBookProX',$r('app.media.mate'),13999),
  19.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  20.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  21.     new Item('华为MateX5',$r('app.media.mate'),12999)
  22.   ]
  23.   build() {
  24.       Column({space:8}) {
  25.         Row(){
  26.           Text('商品列表')
  27.             .fontSize(20)
  28.             .fontWeight(FontWeight.Bold)
  29.         }
  30.         .width('100%')
  31.         .height(60)
  32.         .margin({bottom:20})
  34.         ForEach(
  35.           this.items,
  36.           (item:Item)=>{
  37.             Row({space:10}){
  38.               Image(item.image)
  39.                 .width('20%')
  40.               Column({space:4}){
  41.                 if(item.discount){
  42.                   Text(item.name)
  43.                     .fontSize(20)
  44.                     .fontWeight(FontWeight.Bold)
  45.                   Text(`原件￥ ${item.price}`)
  46.                     .fontSize(16)
  47.                     .fontWeight(FontWeight.Bold)
  48.                     .fontColor('#ccc')
  49.                     .decoration({type:TextDecorationType.LineThrough})
  50.                   Text('折扣价￥ '+(item.price-item.discount))
  51.                     .fontSize(20)
  52.                     .fontWeight(FontWeight.Bold)
  53.                     .fontColor('red')
  54.                   Text(`补贴￥ ${item.discount}`)
  55.                     .fontSize(20)
  56.                     .fontWeight(FontWeight.Bold)
  57.                     .fontColor('red')
  58.                 }else{
  59.                   Text(item.name)
  60.                     .fontSize(20)
  61.                     .fontWeight(FontWeight.Bold)
  62.                   Text(`￥ ${item.price}`)
  63.                     .fontSize(20)
  64.                     .fontWeight(FontWeight.Bold)
  65.                     .fontColor('red')
  66.                 }
  67.               }
  68.               .alignItems(HorizontalAlign.Start)
  69.             }
  70.             .width('92%')
  71.             .height(120)
  72.             .padding(10)
  73.             .backgroundColor('#fff')
  74.             .borderRadius(20)
  75.             .justifyContent(FlexAlign.Start)
  76.           }
  77.         )
  78.       }
  79.       .width('100%')
  80.       .height('100%')
  81.       .backgroundColor('#ccc')
  82.   }
  83. }
复制代码
3.List

列表List是一种复杂容器，具备以下特点：
列表项ListItem数目过多超出屏幕后，会主动提供滚动功能
列表项ListItem既可以纵向分列，也可以横向分列
a.语法

  1. List({space:10}){
  2.     ForEach([1,2,3,4],(item)=>{
  3.         ListItem(){
  4.          //列表项内容，只能包含一个根组件
  5.         }
  6.     })
  7. }
  8. .width('100%')
  9. .listDirection(Axis.Vertical)//列表方向，默认纵向垂直，水平方向Horizontal
复制代码
b.示例


  1. class Item {
  2.   name:string
  3.   image:ResourceStr
  4.   price:number
  5.   discount:number
  6.   constructor( name:string, image:ResourceStr, price:number,discount:number=0) {
  7.     this.name=name
  8.     this.image=image
  9.     this.price = price;
  10.     this.discount=discount
  11.   }
  12. }
  13. @Entry
  14. @Component
  15. struct Index {
  16.   private items:Array<Item>=[
  17.     new Item('华为Mate60',$r('app.media.mate'),6999,500),
  18.     new Item('华为MateBookProX',$r('app.media.mate'),13999),
  19.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  20.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  21.     new Item('华为MateX5',$r('app.media.mate'),12999),
  22.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  23.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  24.     new Item('华为MateX5',$r('app.media.mate'),12999)
  25.   ]
  26.   build() {
  27.       Column({space:8}) {
  28.         Row(){
  29.           Text('商品列表')
  30.             .fontSize(20)
  31.             .fontWeight(FontWeight.Bold)
  32.         }
  33.         .width('100%')
  34.         .height(30)
  35.         .margin({bottom:20})
  37.         List({space:8}){
  38.           ForEach(this.items,(item:Item)=>{
  39.             ListItem(){
  40.               //列表项内容，只能包含一个根组件
  41.               Row({space:10}){
  42.                 Image(item.image)
  43.                   .width('20%')
  44.                 Column({space:4}){
  45.                   if(item.discount){
  46.                     Text(item.name)
  47.                       .fontSize(20)
  48.                       .fontWeight(FontWeight.Bold)
  49.                     Text(`原件￥ ${item.price}`)
  50.                       .fontSize(16)
  51.                       .fontWeight(FontWeight.Bold)
  52.                       .fontColor('#ccc')
  53.                       .decoration({type:TextDecorationType.LineThrough})
  54.                     Text('折扣价￥ '+(item.price-item.discount))
  55.                       .fontSize(20)
  56.                       .fontWeight(FontWeight.Bold)
  57.                       .fontColor('red')
  58.                     Text(`补贴￥ ${item.discount}`)
  59.                       .fontSize(20)
  60.                       .fontWeight(FontWeight.Bold)
  61.                       .fontColor('red')
  62.                   }else{
  63.                     Text(item.name)
  64.                       .fontSize(20)
  65.                       .fontWeight(FontWeight.Bold)
  66.                     Text(`￥ ${item.price}`)
  67.                       .fontSize(20)
  68.                       .fontWeight(FontWeight.Bold)
  69.                       .fontColor('red')
  70.                   }
  71.                 }
  72.                 .alignItems(HorizontalAlign.Start)
  73.               }
  74.               .width('92%')
  75.               .height(120)
  76.               .padding(10)
  77.               .backgroundColor('#fff')
  78.               .borderRadius(20)
  79.               .justifyContent(FlexAlign.Start)
  80.             }
  81.           })
  82.         }
  83.         .width('100%')
  84.         .layoutWeight(1)
  85.       }
  86.   }
  87. }
复制代码
四、自界说组件

1.拆分组件

  1. @Component
  2. struct Com {
  3.   private title:string=''
  4.   build(){
  5.     //组件UI描述
  6.   }
  7. }
  9. @Component
  10. struct XxxPage {
  11.   build(){
  12.     //使用组件
  13.     Com({title:'标题'})
  14.   }
  15. }
复制代码
2.在页面中引入Header组件

3.全局自界说构建函数

  1. @Builder function XxxBuilder(){
  2.     //UI描述
  3. }
  4. @Component
  5. struct XxxPage {
  6.     build(){
  7.         XxxBuilder()
  8.     }
  9. }
复制代码
4.局部自界说构建函数

  1. @Component
  2. struct XxxPage {
  3.     @Builder YyyBuilder(){
  4.         //UI描述
  5.     }
  6.     build(){
  7.         this.YyyBuilder()
  8.     }
  9. }
复制代码
5.全局公共样式函数

仅可封装组件的通用属性
  1. @Styles function fillScreen(){
  2.   .width('100%')
  3.   .height('100%')
  4.   .backgroundColor('#f6f6f6')
  5. }
  6. //Extend装饰器，继承模式，只能写在全局位置
  7. @Extend(Text) function priceText(){
  8.   .fontSize(20)
  9.   .fontWeight(FontWeight.Bold)
  10.   .fontColor('red')
  11. }
复制代码
6.局部公共样式函数

  1. @Component
  2. struct XxxPage {
  3.     @Builder YyyBuilder(){
  4.         //UI描述
  5.     }
  6.     build(){
  7.         this.YyyBuilder()
  8.         .fillScreen()
  9.     }
  10.     //局部公共样式函数
  11.     @Styles  fillScreen(){
  12.         .width('100%')
  13.         .height('100%')
  14.         .backgroundColor('#f6f6f6')
  15.     }
  16. }
复制代码
7.示例


  1. @Component
  2. export struct Header {
  3.   private title:ResourceStr|string=''
  4.   build(){
  5.     Row(){
  6.       Image($r('app.media.left'))
  7.         .width(30)
  8.         .onClick(()=>{})
  9.       Text(this.title)
  10.         .fontSize(20)
  11.         .fontWeight(FontWeight.Bold)
  12.       Blank()
  13.       Image($r('app.media.reset'))
  14.         .width(24)
  15.         .onClick(()=>{})
  16.     }
  17.     .width('100%')
  18.     .height(30)
  19.     .backgroundColor('#f6f6f6')
  20.   }
  21. }
复制代码
  1. import {Header} from '../Com/CommomCom';
  2. class Item {
  3.   name:string
  4.   image:ResourceStr
  5.   price:number
  6.   discount:number
  7.   constructor( name:string, image:ResourceStr, price:number,discount:number=0) {
  8.     this.name=name
  9.     this.image=image
  10.     this.price = price;
  11.     this.discount=discount
  12.   }
  13. }
  14. //全局自定义构建函数
  15. // @Builder function ItemCard(item:Item){
  16. // }
  17. //全局公共样式函数
  18. @Styles function fillScreen(){
  19.   .width('100%')
  20.   .height('100%')
  21.   .backgroundColor('#f6f6f6')
  22. }
  23. //继承模式，只能写在全局位置
  24. @Extend(Text) function priceText(){
  25.   .fontSize(20)
  26.   .fontWeight(FontWeight.Bold)
  27.   .fontColor('red')
  28. }
  30. @Entry
  31. @Component
  32. struct Index {
  33.   private items:Array<Item>=[
  34.     new Item('华为Mate60',$r('app.media.mate'),6999,500),
  35.     new Item('华为MateBookProX',$r('app.media.mate'),13999),
  36.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  37.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  38.     new Item('华为MateX5',$r('app.media.mate'),12999),
  39.     new Item('华为WatchGT4',$r('app.media.mate'),1438),
  40.     new Item('华为FreeBudPro3',$r('app.media.mate'),1499),
  41.     new Item('华为MateX5',$r('app.media.mate'),12999)
  42.   ]
  43.   build() {
  44.       Column({space:8}) {
  45.         //标题部分
  46.         Header({title:'商品列表'})
  47.           .margin({top:10})
  48.           .padding({left:20,right:20})
  49.         //商品列表部分
  50.         List({space:8}){
  51.           ForEach(this.items,(item:Item)=>{
  52.             ListItem(){
  53.               //列表项内容，只能包含一个根组件
  54.               this.ItemCard(item)
  55.             }
  56.           })
  57.         }
  58.         .width('100%')
  59.         .padding(20)
  60.         .layoutWeight(1)
  61.       }
  62.     .fillScreen()
  63.   }
  64.   //局部自定义构建函数
  65.   @Builder  ItemCard(item:Item){
  66.   Row({space:10}){
  67.     Image(item.image)
  68.       .width('20%')
  69.     Column({space:4}){
  70.       if(item.discount){
  71.         Text(item.name)
  72.           .fontSize(20)
  73.           .fontWeight(FontWeight.Bold)
  74.         Text(`原件￥ ${item.price}`)
  75.           .fontSize(16)
  76.           .fontWeight(FontWeight.Bold)
  77.           .fontColor('#ccc')
  78.           .decoration({type:TextDecorationType.LineThrough})
  79.         Text('折扣价￥ '+(item.price-item.discount))
  80.           .priceText()
  81.         Text(`补贴￥ ${item.discount}`)
  82.           .priceText()
  83.       }else{
  84.         Text(item.name)
  85.           .fontSize(20)
  86.           .fontWeight(FontWeight.Bold)
  87.         Text(`￥ ${item.price}`)
  88.           .priceText()
  89.       }
  90.     }
  91.     .alignItems(HorizontalAlign.Start)
  92.   }
  93.   .justifyContent(FlexAlign.Start)
  94.   .CardItemScreen()
  95.   }
  96.   //局部公共样式函数
  97.   @Styles  fillScreen(){
  98.     .width('100%')
  99.     .height('100%')
  100.     .backgroundColor('#f6f6f6')
  101.   }
  102.   @Styles  CardItemScreen(){
  103.     .width('100%')
  104.     .height(120)
  105.     .backgroundColor('#fff')
  106.     .borderRadius(20)
  107.   }
  108. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81429

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表