hongmeng开发

Image图片组件

Text组件

如在两个限定目录里面定义完后，也要在 base牡蛎下去定义一下，不然会报错

TextInput

Button

Slider

案例

@State imageWidth:number=30
  //构建 → 界面
  build() {

    Column(){
      Image($r('app.media.startIcon'))
        .width(this.imageWidth)

      TextInput({placeholder:this.imageWidth.toFixed(0)})
        .width(240)
        .height(40)
        .onChange(value=>{
          this.imageWidth=parseInt(value)
        })

      Row(){
        Button('增加')
          .onClick(()=>{
            this.imageWidth+=10
          })

        Button('缩小')
          .onClick(()=>{
            this.imageWidth-=10
          })
      }

      Slider({
        min:0,
        max:100,
        step:10,
        value:this.imageWidth,
        style:SliderStyle.InSet,//在内还是在外
        direction:Axis.Horizontal,//进度条水平还是 垂直
        reverse:false//是否反向滑动
      }).showTips(true)//是否显示百分比
        .onChange(value=>{
          this.imageWidth=value
        })

    }.width('100%').height('100%').padding(20).backgroundColor(Color.Pink)
    .padding(20)

Column和Row

justifyContent

Divider分割线

渲染控制

案例

class Item{
  name:string
  image:ResourceStr
  price:number

  constructor(name:string,image:ResourceStr,price:number) {
    this.name=name
    this.image=image
    this.price=price
  }

}

@Entry
@Component
struct demo {
  @State message:number=1;
  @State color:string='#CCCC'
  @State count:number=8888
  @State imageWidth:number=30

  private items: Array<Item>=[
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999)

  ]

    //构建 → 界面
    build() {

      Column(){
        Text('商品列表').fontSize(24).fontWeight(FontWeight.Bold).width('100%')


        ForEach(this.items,
          (item:Item)=>{
            Row(){
              Image(item.image).width(60)
              Column(){
                Text(item.name).fontSize(16)
                Text(item.price.toFixed(0)).fontColor(Color.Red).fontSize(13)
              }.alignItems(HorizontalAlign.Start)
            }.width('100%').height(80)
            .justifyContent(FlexAlign.SpaceBetween)
            .padding({left:15,right:15})
            .margin({top:30})
            .backgroundColor(Color.White)
            .borderRadius(10)
        })

      }.width('100%').height('100%').padding(20).backgroundColor(Color.Pink)
      .padding(20)
  }
}

list组件

案例

class Item{
  name:string
  image:ResourceStr
  price:number

  constructor(name:string,image:ResourceStr,price:number) {
    this.name=name
    this.image=image
    this.price=price
  }

}

@Entry
@Component
struct demo {
  @State message:number=1;
  @State color:string='#CCCC'
  @State count:number=8888
  @State imageWidth:number=30

  private items: Array<Item>=[
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999),
    new Item('华为60',$r('app.media.app_icon'),6999)

  ]

    //构建 → 界面
    build() {

      Column(){
        Text('商品列表').fontSize(24).fontWeight(FontWeight.Bold).width('100%')
          .margin({bottom:30})

        List({space:20}){
          ForEach(this.items,
            (item:Item)=>{
              ListItem(){
                Row(){
                  Image(item.image).width(60)
                  Column(){
                    Text(item.name).fontSize(16)
                    Text(item.price.toFixed(0)).fontColor(Color.Red).fontSize(13)
                  }.alignItems(HorizontalAlign.Start)
                }.width('100%').height(100)
                .justifyContent(FlexAlign.SpaceBetween)
                .padding({left:15,right:15})
                .backgroundColor(Color.White)
                .borderRadius(10)

              }
            })
        }.layoutWeight(1)



      }.width('100%').height('100%').padding(20).backgroundColor(Color.Pink)
      .padding(20)
  }
}

自定义组件

//全局自定义构建函数
@Builder function ItemCard(item:Item){
  Row(){
    Image(item.image).width(60)
    Column(){
      Text(item.name).fontSize(16)
      Text(item.price.toFixed(0)).fontColor(Color.Red).fontSize(13)
    }.alignItems(HorizontalAlign.Start)
  }.width('100%').height(100)
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({left:15,right:15})
  .backgroundColor(Color.White)
  .borderRadius(10)
}

使用：

//全局公共样式函数
@Styles function StylesQuan(){
  .width('100%')
  .height('100%')
  .padding(20)
  .backgroundColor(Color.Pink)
  .padding(20)
}

使用：

注意：只能抽取公共的，例如text,image这种有特有属性的组件就用不了

需要**@Extend()**继承该组件才可以(继承模式只能写在全局里)

状态管理

@state

@prop和Link

@Provide和@Consume

@objectLink和@Observed

嵌套对象

数组元素

页面路由

页面动画 有点薄弱

Stage模型

配置文件

UIAbitity生命周期

组件的生命周期

其中builder函数创建后的是和销毁前的是组件生命周期，可以在任意组件中使用，而页面的生命周期只能在@entry中使用

UIAlility启动模式

网络连接

http数据请求