鸿蒙 HarmonyOS学习日记 Day 4 组件、渲染控制、代码

---

一、组件

1、文本输入框 - TextInput

	1、用法
	    TextInput({placeholder: '提示文本', text:'默认文本'})
	2、示例
	    TextInput({text:'当前输入文本'})
	    .type(InputType.输入框类型)
	    .onChange(value => {
	        //value是用户输入的内容        
	    })

2、按钮组件 - Button

	1、用法：
	    Button(label?: 文字)
	    
	2、对象属性
	    Button()
	    .type(ButtonType.按钮类型)
	    类型：
	        Capsult：胶囊型
	        Circle： 圆形
	        Normal： 普通按钮
	    
	    .onClick(() => {
	        //点击事件    
	    })

3、滑动条组件 - Slider

	1、用法
	    Slider({
	        min: 最小值
	        max: 最大值
	        value: 当前值
	        step: 步长
	        style: 样式，默认值为 SliderStyle.OutSet
	        direction: 滑动条方向，默认值为 Axis.Horizontal
	        reverse: 是否反向滑动                
	    })
	    .showTips(是否展示百分比提示)
	    .onChange(value => {
	        //value就是当前滑块值    
	    })

八、渲染控制

1、ForEach

	1、用于进行相同页面元素的渲染
	2、语法
	    ForEach(
	        数组,
	        页面元素操作函数,
	        keyGenerator?(item:数组,index?:number):string => {
	            //为数组每一项生成一个唯一标识，可选        
	        }
	    )
	    

2、if

	1、用于进行逻辑判断
	2、语法
	    if(){
	            
	    }else{
	            
	    }
	    

九、List容器

	1、定义
	    List是一种复杂容器，具备下列特点：
	        List项超出屏幕时，会自动提供滚动功能
	        List项既可以纵向排列，也可以横向排列
	        
	2、语法
	    List(){
	        ListItem(){
	                    
	        }
	    }
	    .listDirection(Axis.列表方向) //列表方向，默认纵向
	    

十、代码优化

1、自定义组件

	1、用处
	    用于增加代码复用性，将代码封装到组件中，进行反复使用
	    
	2、定义
	    @Component
	    struct 组件名 {
	        代码    
	    }
	    
	3、引用
	    组件名()
	
	4、传参
	    若想要传参，应该在组件定义时，将需要传参的变量定义为成员变量
	    如：
	        private 变量名: 类型
	
	5、独立文件调用
	    当将自定义组件作为一个独立文件时，应该使用在struct前加上export导出
	    而引用时使用 import { 组件名 } from '文件名'
	    

2、自定义构建函数

	1、说明
	    构建函数分为两种，
	    一种在组件外写，称作全局构建函数，需要加function关键字
	    一种在组件内写，称作局部构建函数，不需要加function关键字，这种方式调用时，需要在前方加上this
	    
	    
	2、定义
	    @Builder function 函数名(参数){
	            代码体
	    }
	    
	3、使用
	    函数名(参数)
	    

3、自定义公共样式

		1、说明
		    同样分为外部写和内部写两种，规则相同
		    
		2、定义
		    @Styles function 样式名(){
		        样式    
		    }
		    
	
	    
	3、使用
	    .样式名()
	    

4、继承样式

	1、说明
	    只能写在外部,用于将组件特有属性作为公有样式
	
	2、定义
	    @Extend(继承的对象) function 样式名(){
	         样式   
	    }
	    如：
	        @Extend(Text) function 样式名(){
	            .fontColor(Green)
	            .fontSize(18)        
	        }