hongmeng开发

Image图片组件

Text组件

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

TextInput

Button

Slider

案例
ts 复制代码
@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分割线

渲染控制

案例
ts 复制代码
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组件

案例
ts 复制代码
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)
  }
}

自定义组件

ts 复制代码
//全局自定义构建函数
@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)
}

使用:

ts 复制代码
//全局公共样式函数
@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数据请求
相关推荐
hqxstudying8 分钟前
Java创建型模式---原型模式
java·开发语言·设计模式·代码规范
Dcs27 分钟前
VSCode等多款主流 IDE 爆出安全漏洞!插件“伪装认证”可执行恶意命令!
java
保持学习ing33 分钟前
day1--项目搭建and内容管理模块
java·数据库·后端·docker·虚拟机
京东云开发者44 分钟前
Java的SPI机制详解
java
超级小忍1 小时前
服务端向客户端主动推送数据的几种方法(Spring Boot 环境)
java·spring boot·后端
程序无bug1 小时前
Spring IoC注解式开发无敌详细(细节丰富)
java·后端
小莫分享1 小时前
Java Lombok 入门
java
程序无bug1 小时前
Spring 对于事务上的应用的详细说明
java·后端
食亨技术团队1 小时前
被忽略的 SAAS 生命线:操作日志有多重要
java·后端
宇钶宇夕1 小时前
EPLAN 电气制图:建立自己的部件库,添加部件-加SQL Server安装教程(三)上
运维·服务器·数据库·程序人生·自动化