Day 2 鸿蒙开发——ArkUI组件运用

首先页面开发肯定是起步的第一步，ArkTs提供了一套开发极简、高性能、支持跨设备的UI开发框架，下面先简单熟悉一下基础组件的运用吧。

文档中心https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-ui-development-overview-0000001438467628-V3

练习示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State array: Array<Object> = [
    {
      id: 0,
      name: '商品一',
      price: 3000,
      img: $r('app.media.icon')
    },
    {
      id: 1,
      name: '商品二',
      price: 5000,
      img: $r('app.media.icon')
    },
    {
      id: 2,
      name: '商品三',
      price: 1000,
      img: $r('app.media.icon'),
      discount:500
    },
    {
      id: 3,
      name: '商品四',
      price: 2000,
      img: $r('app.media.icon')
    },
    {
      id: 4,
      name: '商品四',
      price: 3000,
      img: $r('app.media.icon')
    },
    {
      id: 5,
      name: '商品五',
      price: 3000,
      img: $r('app.media.icon'),
      discount:600
    },
    {
      id: 6,
      name: '商品六',
      price: 1000,
      img: $r('app.media.icon')
    },
    {
      id: 7,
      name: '商品七',
      price: 1300,
      img: $r('app.media.icon')
    },
    {
      id: 8,
      name: '商品八',
      price: 2800,
      img: $r('app.media.icon')
    }
  ]
  @State imgWidth:number = 200
  build() {
    Column(){
      Image($r('app.media.icon')).width(this.imgWidth).margin({bottom:20})
      Text('宽度：'+this.imgWidth).fontSize(20).margin({bottom:20})
      Row(){
        Column(){
          Button('宽度增加').onClick(()=>{
            if(this.imgWidth<300){
              this.imgWidth += 10
            }
          })
        }
        Column() {
          Button('宽度减少').onClick(() => {
            if (this.imgWidth > 10) {
              this.imgWidth -= 10
            }
          })
        }
      }.justifyContent(FlexAlign.Center).width('100%').margin({bottom:20})
      Row(){
        Column(){
          TextInput({placeholder:'请输入',text:this.imgWidth.toFixed(0)}).type(InputType.Number).onChange((value)=>{
            if(value){
              this.imgWidth = parseInt(value)
            }
          })
        }
      }.justifyContent(FlexAlign.Center).width('100%')
      Row(){
        Column(){
          Slider({
            min:0,
            max:300,
            value:this.imgWidth,
            step:10,
            style:SliderStyle.InSet,
            direction:Axis.Horizontal,
          }).width('100%').showTips(true).onChange(value=>{
            this.imgWidth = value
          })
      }.justifyContent(FlexAlign.Center).width('100%')
    }.padding(30)
 
  }
 
     }
}

一、Image

开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。

 

其他图片使用方式可参考官网。

二、Text

配置不同语言的资源文本时：

默认资源 【src/main/resources/base/element/string.json】

中文资源：【src/main/resources/zh_CN/element/string.json】

英文资源：【src/main/resources/en_US/element/string.json】

切换语言模式：

三、TextInput

输入框类型

输入框事件

四、Button

五、Slider

六、Column & Row

Column容器

Row容器

七、循环控制

八、List

附上demo示例代码和效果：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State array: Array<Object> = [
    {
      id: 0,
      name: '商品一',
      price: 3000,
      img: $r('app.media.icon')
    },
    {
      id: 1,
      name: '商品二',
      price: 5000,
      img: $r('app.media.icon')
    },
    {
      id: 2,
      name: '商品三',
      price: 1000,
      img: $r('app.media.icon'),
      discount:500
    },
    {
      id: 3,
      name: '商品四',
      price: 2000,
      img: $r('app.media.icon')
    },
    {
      id: 4,
      name: '商品四',
      price: 3000,
      img: $r('app.media.icon')
    },
    {
      id: 5,
      name: '商品五',
      price: 3000,
      img: $r('app.media.icon'),
      discount:600
    },
    {
      id: 6,
      name: '商品六',
      price: 1000,
      img: $r('app.media.icon')
    },
    {
      id: 7,
      name: '商品七',
      price: 1300,
      img: $r('app.media.icon')
    },
    {
      id: 8,
      name: '商品八',
      price: 2800,
      img: $r('app.media.icon')
    }
  ]
 
  build() {
    Column() {
      Column() {
        Text('商品列表')
          .fontSize(30)
          .fontWeight('bold')
          .width('100%')
          .margin({ top: 20, bottom: 10, left: 20 })
      }
      List({ space: 10 }) {
        ForEach(this.array, item => {
          ListItem() {
            Row() {
              Column() {
                Image(item.img)
                  .width('20%')
              }
 
              Column() {
                Text(item.name).fontSize(20).fontWeight('bold').margin({ bottom: 10 }).width('100%')
                if(item.discount){
                  Text('原价：￥ ' + item.price).fontColor('#ddd').decoration({type:TextDecorationType.LineThrough}).margin({ bottom: 10 }).width('100%')
                  Text('已优惠：￥ ' + item.discount).fontColor('#fb7299').width('100%').margin({ bottom: 10 })
                  Text('现价：￥ ' + (item.price - item.discount)).fontColor('#fb7299').width('100%')
 
                }else {
                  Text('￥ ' + item.price).fontColor('#fb7299').margin({ bottom: 10 }).width('100%')
                }
              }.margin({ left: 10 })
 
            }.width('100%')
          }
          .margin({ left: 20, right: 20 })
          .backgroundColor('#fff')
          .borderRadius(20)
          .padding(10)
          .border({
            width: 1,
            color: '#333'
          })
        })
      }
      .width('100%')
      .listDirection(Axis.Vertical)
    }
    .width('100%')
  }
 
 
}