鸿蒙学习笔记·一：基础组件、容器、自定义组件、循环渲染

ArkUI常见组件

Text 文本显示

1.声明

Text(content?:string|Resource)

Text('图片');

Text($r('app.string.text'));//Resource 读本地资源文件
//先找限定词定义好的目录资源(zh_CN/en_US) 再找base目录

string.json中

"string"{
    "name":"",
    "value":"中/英文"
}

2.属性

Text('图片')
.lineHeight(32)//行高
.fontSize(20)//字体大小
.fontColor('#36D')
.fontWeight(FontWeight.Medium)//粗细
.border({width: 1})//边框
.textAlign(TextAlign.End)
//End右对齐 Center居中 Start左对齐
.lineHeight(20)//行高

多行文本

//多行文本
Text('Hello from me in other side and set to the end what are you doing?')
.textAlign(TextAlign.Center)
.fontSize(30)
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(1)
.border({width:2})
.width('100%')
Text('Hello from me in other side and set to the end what are you doing?')
.textAlign(TextAlign.End)
.fontSize(30)
.border({width:2})
.width('100%')
.textOverflow({overflow:TextOverflow.Clip})
.maxLines(1)//最大行数1

• 剪裁方式 Clip
• 省略号形式 Ellipsis

TextInput 文本输入框

1.声明

TextInput({placeholder?:ResourceStr,text?:ResourceStr})

TextInput({placeholder:'请输入账号或手机号'})//placeHolder 无输入 提示文本
TextInput({text:'hello'})//text 输入框初始化默认

2.属性

TextInput({})
.width(150)//
.height(30)
.backgroundColor('#36D')
.type(InputType.Password)//输入框类型 
.onChange(value => {
    
})//用户改变输入内容 value  ※value默认string类型

a=parseInt(b);//b string转成number类型赋给a
a=b.toFixed(0);//b number转成string类型给a 0代表没有小数

Button 按钮

1.声明

Button(lable?:ResourceStr)

Button('点我')//文字型
Button(){
    Image($r('app.media.'))//嵌套图片
}

2.属性、事件

Button('')
.width()
.height()
.fontSize()
.type(ButtonType.Normal)
.onClick(()=>{

})//((参数)=>{执行})

Slider 滑块

1.属性、事件

Slider({
    min:0,//所控制的对应值
    max:100,
    value:40,//当前值
    step:10,//滑动步长
    style:SliderStyle.OutSet,//InSet
    direction:Axis.Horizontal,//Vertical
    reverse:false //反向滑动
})
.width('90%')
.showTips(true)//是否显示value百分比
.blockColor('')
.trackThickness(7)//track 轨道
.onChange(value=>{

})

ArkUI布局属性

Row Column

1.两种容器

2.justifyContent

Column({space:5}){
      Column()
        .width('100%')
        .height(30)
        .backgroundColor(Color.Green)
      Column()
        .width('100%')
        .height(30)
        .backgroundColor(Color.Red)
    }
    .justifyContent(FlexAlign.Center)//主轴排布
    .width('90%')
    .height(200)
    .border({width:2})

Column(){
      Column()
        .width('50%')
        .height(30)
        .backgroundColor(Color.Green)
      Column()
        .width('50%')
        .height(30)
        .backgroundColor(Color.Red)
      Column()
        .width('50%')
        .height(30)
        .backgroundColor(Color.Yellow)
    }
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.Center)//二者结合
    .width('90%')
    .height(500)
    .border({width:2})

3.alignItems

Column(){
      Column()
        .width('50%')
        .height(30)
        .backgroundColor(Color.Green)
      Column()
        .width('50%')
        .height(30)
        .backgroundColor(Color.Red)
    }
    .alignItems(HorizontalAlign.Start)//交叉轴对齐方式 Start Center End
    .width('90%')
    //.height(100)//自动为两内嵌容器高度之和
    .border({width:2})

结果

4.边距

.padding({left:14,right:14})//页边距
.margin({top:35,bottom:35})//外边距

5.space:控制容器间距

Column({space:5}){
      Column()
        .width('100%')
        .height(30)
        .backgroundColor(Color.Green)
      Column()
        .width('100%')
        .height(30)
        .backgroundColor(Color.Red)
    }
    .width('90%')
    .height(100)
    .border({width:2})

基本工程目录

1.AppScope放资源文件

• element放公共字符串
• media媒体资源
• app.json5全局应用配置文件

2.entry 应用主模块 放代码
entry>src包含总的main

• main
  • ets
    • entryablity ability管理
    • pages界面
  • resource
    • src/main/resources/base/profile/main_pages.json page路径配置
  • entry>src>main>module.json5模块配置文件
• ohostest单元测试目录

自定义组件

@Component

@Component装饰

@Component//struct关键字声明组件
struct HelloComponent{
  @State msg:string='Fuck You';//默认
  build() {//必须有build
    Row(){
      Text(this.msg)
        .fontSize(40)
        .onClick(()=>{
          this.msg='Love You';
        })
    }
  }
}
@Entry
@Component
struct Index {
  build() {
    Column(){
      HelloComponent();//未设置参数 则按组件内默认参数
      Divider();
      HelloComponent({msg:'我喜欢你'});
    }
  }
}

build()

• @Entry 装饰的自定义组件，其 build()函数下的根节点唯一且必要，且必须为容器组件，其中 ForEach 禁止作为根节点。
  @Component 装饰的自定义组件，其 build()函数下的根节点唯一且必要，可以为非容器组件，其中 ForEach 禁止作为根节点。
• 不能声明本地变量 let
• 不能用console.info(? switch 表达式?:

@Builder

@Builder function Speak5(){
  Text('Kiss You')
}//全局构建函数 要有function关键字
@Entry
@Component
struct Index {
  Speak1(): string {
    return 'Love You';
  } //返回string
  @Builder Speak2() {//局部自定义构建函数 不能用function关键字
    Text('Fuck You')
  }
  // Speak3():void{
  //   Text('Kill You')
  // } 没有@Builder 无法调用Text组件
  Speak4(): void {
  }
  build() {
    Column() {
      //this.Speak4();
      //'this.Speak4();' does not comply with the UI component syntax
      //不能调用无@Builder装饰的方法
      this.Speak2(); //方法在组件内 用this
      Divider();
      Text(this.Speak1()) //参数为方法返回值
    }
  }
}

@Style

样式

生效在容器组件 而不是在容器内的组件

@Component
struct HelloComponent{
  @State msg:string='Fuck You';//默认
  build() {
    Row(){
      Button(this.msg)
        .fontSize(40)
    }
  }
}
@Entry
@Component
struct Index {
  build() {
    Column(){
      HelloComponent()
        .backgroundColor(Color.Red)//作用于HelloComponent
        .width(200)
        .height(200)
    }
  }
}

生命周期

• @Component组件 @Entry页面
• 页面

循环控制 渲染

foreach

1.语法

private items: Array<Item> = [//数组用中括号 []
    new Item('Apple', 'First', 100,50),
    new Item('Banana', 'Second', 200),
    new Item('Carrot', 'Third', 300,200)
]
ForEach(
    arr:Array<T>,//数据数组
    (item:any,index?:number)=>{//页面组件生成函数
        Row(){
            Image(item.image)
            Column(){
                Text(item.name)
                Text(item.price)
            }
        }
    }
    keyGenerator?:(item:any,index?:number):string=>{
    //??
    }
)

ifelse

if(){

}else{

}

二者结合代码

      ForEach(
        this.items,
        (item: Item) => {
          Row({ space: 5 }) {
            //图片按钮
            Button(item.image)
              .type(ButtonType.Normal)
              .fontSize(20)
              .height(100)
              .width(130)
            //名称和价格
            Column() {
              if(item.discount){
                Text(item.name)
                  .fontSize(30)
                  .fontColor(Color.Black)
                  .fontWeight(FontWeight.Bold)
                Text('原价'+' $' + item.price)
                  .width('100%')
                  .fontSize(20)
                  .fontColor(Color.Black)
                  .fontWeight(FontWeight.Regular)
                  .decoration({type:TextDecorationType.LineThrough})
                Text('折扣价'+' $'+item.discount)
                  .fontSize(25)
                  .fontColor(Color.Red)
                  .fontWeight(FontWeight.Regular)
              }else{
                Text(item.name)
                  .fontSize(30)
                  .fontColor(Color.Black)
                  .fontWeight(FontWeight.Bold)
                Text('$' + item.price)
                  .width('100%')
                  .fontSize(25)
                  .fontColor(Color.Red)
                  .fontWeight(FontWeight.Regular)
              }
            }
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Start)
            .height(120)
          }
          .width('100%')
          .backgroundColor('#CCC')
          .borderRadius(20) //设置圆角
          .height(120)
          .padding(10)
        }
      )

List

• 超出屏幕自动有滚动功能
• 可纵可横

    List({space:20}){
      ForEach(
        [1,2,3,4,5,6,7],
        (item:number)=>{//生成函数中放listitem容器
          ListItem(){
            Text('ListItem'+item)
              .fontSize(40)
              .width('100%')
              .textAlign(TextAlign.Center)
              .backgroundColor('#377C77')
          }
        }
      )
    }
    .width('100%')
    .listDirection(Axis.Horizontal)

结果