HarmonyOS 学习与开发实战笔记 - 之二：ArkUI组件详解

2.1、Image组件

Image:图片显示组件

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

   Image(src: string|PixelMap|Resource)
   

   1. string格式，通常用来加载网络图片，需要申请网络访问权限: ohos.permission.INTERNET
Image('https://xxx .png')
   2. PixelMap格式，可以加载像素图，常用在图片编辑中
      Image(pixelMapobject)
   3. Resource格式，加载本地图片，推荐使用
      Image($r('app.media.mate60')) 对应在目录中的media目录下的图片
      Image($rawfile('mate60.png'))对应在目录中rawfile目录下的图片
2. 添加图片属性

   Image($r('app.media.icon'))
   .width(100)宽度
   .height(120) //高度
   .borderRadius(10) //边框圆角
   .interpolation(ImageInterpolation.High) //图片插值
   

2.2、Text文本显示组件

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

   Text(content?: string|Resource)
   

   
   1. string格式，直接填写文本内容
      Text('图片宽度')
   2. Resource格式，读取本地资源文件
      Text($r('app.string.width_label'))
2. 添加文本属性

Text('注册账号')
	.lineHeight(32) // 行高
	.fontSize(20) // 字体大小
	.fontColor('#ff1876f8') // 字体颜色
	.fontweight(FontWeight.Medium) //字体粗细

2.3、TextInput文本输入框组件

1. 声明TextInput组件

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

   1. placeHoder:输入框无输入时的提示文本
      TextInput([placeholder:'请输入账号或手机号'})
   2. text:输入框当前的文本内容
      TextInput({text:'itcast'})

2. 添加属性和事件

TextInput({text:'当前输入文本'})
	.width(150) // 宽
	.height(30) // 高
	.backgroundColor('#FFF') // 背景色
	.type(InputType.Password) // 输入框类型

名称	描述
Normal	基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
Password	密码输入模式。支持输入数字、字母、下划线、空格、特殊字符
Email	邮箱地址输入模式。支持数字，字母，下划线，以及@字符.
Number	纯数字输入模式
PhoneNumber	电话号输入模式，支持输入数字、+、-、*、#、长度不限

2.4、Button按钮组件

1. 声明Button组件，label是按钮文字

   Button(label?: ResourceStr)
   

   1. 文字型按钮
      Button('点我')
   2. 自定义按钮，在Button内嵌套其它组件
      Button(){Image($r('app.media.search')).width(20).margin(10)}
2. 添加属性和事件

   Button('点我')
   	.width(100)
   	.height(30)
   	.type(ButtonType.Normal) // 按钮类型
   	.onClick(() => {
   	//处理点击事件
   	}
   

名称	描述
Capsule	胶囊型按钮 (圆角默认为高度的一半)
Circle	圆形按钮
Normal	普通按钮 (默认不带圆角)

2.5、Slider滑动条组件

Silder(options?: SliderOptions )

slider({
	min: 0,// 最小值
	max: 100,// 最大值
	value: 30 ,// 当前值
	step: 1,// 滑动步长
	style: SliderStyle.OutSet,// InSet
	direction: Axis.Horizontal,// Vertical
	reverse: false //是否反向滑动
)}

属性与事件

.width('90%')
.showTips(true)//是否展示value 百分比提示
.blockColor('#36d')
.onChange(value => {
	//value就是当前滑块值
})

2.6、Column和Row

属性方法名	说明	参数
justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign枚举
alignItems	设置子元素的交叉轴方向的对齐方式	Row容器使用VerticalAlign枚举，Column容器使用HorizontalAlign枚举

@Entry
@Component
struct Index {
	build() {
		Column({space: 20}){
			Text('item1')
			Text('item2')
			Text('item3')
			Text('item4')
		}
		.width('100%')
		.height('100%')
		.margin({top:10})
		.padding({top:20})
		justifyContent(FlexAlign.Center)
		alignItems(HorizontalAlign.Center)
	}
}

2.7、循环控制

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

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


@Entry
@Component
struct ItemPage {

  private items :Array<Item> = [
    new Item('荣耀',$r('app.media.honor30'),3999),
    new Item('oppo',$r('app.media.oppoR17'),2999),
    new Item('iPhone',$r('app.media.iPhoneX'),8999,1899),
  ]


  build() {
      Column({space:8}) {
        Row(){
          Text('商品列表')
            .fontWeight(FontWeight.Bold)
            .fontSize(30)
        }
        .width('100%')
        .margin({bottom:20})

        
        ForEach(
          this.items,
          item=>{
            Row({space:10}){
              Image(item.image)
                .width(100)
              Column(){
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)

                if (item.discount) {
                  Text('原价：￥'+item.price)
                    .decoration({type:TextDecorationType.LineThrough,color:Color.Black})
                  Text('现价：￥'+(item.price-item.discount))
                    .fontSize(18)
                    .fontColor('#F36')
                  Text('折扣：￥'+item.discount)
                    .fontSize(18)
                    .fontColor('#F36')
                }else {
                  Text('原价：￥'+item.price)
                    .fontSize(18)
                    .fontColor('#F36')
                }
              }
            }
            .width('80%')
            .justifyContent(FlexAlign.Start)
          }
        )
        }
      .width('100%')
      .height('100%')
  }
}

2.8、List

列表(List)是一种复杂容器，具备下列特点

1. 列表项(ListItem)数量过多超出屏幕后，会自动提供滚动功能
2. 列表项 (ListItem)既可以纵向排列，也可以横向排列

2.9、自定义组件

1. 自定义组件\

   @Component
   struct MyComponent {
   	private title: string
   	build(){
   		//组UI描述
   		Text(this.title)
   	}
   }
   

   @Entry
   @Component
   struct XxxPage{
   build(){
   		//引用组件
   		MyComonent({title:'订单列表'})
   	}
   }
   

2. 自定义构建函数，可以定义在全局或组件内

   //全局自定义构建函数
   @Builder function XxxBuilder(){
   	//UI描达
   }
   

   @Component
   struct XxxComponent {
   	//组件内自定义构建函数
   	@Builder YyyBuilder(){
   		//UI描达
   	}
   	build(){
   		XxxBuilder()
   		this.YyyBuilder()
   	}
   }
   

3. @Styles装饰器，仅可封装组件通用属性

//全局公共样式
@Styles function fillScreen(){
	.width('100%')
	.height('100%')
}

@Entry
@Component
struct XxxPage [
	//组件内公共样式
	@Styles normalBackground(){
		.backgroundColor('#EFEFEF')
		.padding(14)
	}
	build(){
		Row() {/*...*/}
			.filiScreen()
			.normalBackground()
	}
}

4. @Extend装饰器，仅可定义在全局，可以设置组件特有属性

@Extend(Text) function priceText(){
	.fontSize(18)
	.fontColor('#F36')
}