Image 图片组件
string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx.png')
PixelMap格式,可以加载像素图,常用在图片编辑中
Image(pixelMapobject)
Resource格式,加载本地图片,推荐使用
Image($r('app.media.mate60'))
Image($rawfile('mate60.png'))
Image($r('app.media.icon'))
.width(250) //宽度
.interpolation(ImageInterpolation.High)//设置高清
Text文本组件
Text($r('app.string.module_desc'))//名称资源引用
.baselineOffset(0) //基线的偏移量
.fontSize(30) //字体大小
.border({ width: 1 })//边框
.padding(10) //内边距
.width(300) //宽度
.lineHeight(32)//行高
.fontcolor('*#ff1876f8')// 字体颜色
.fontWeight(FontWeight.Medium)//字体粗细
TextInput 输入框组件
1,声明TextInput组件:
TextInput( fplaceholder?:ResourceStr,text?: ResourceStr})
① placeHoder:输入框无输入时的提示文本TextInput({placeholder:i请输入账号或手机号小)
② text:输入框当前的文本内容TextInput({text:itcast'})
2.添加属性和事件
TextInput({text:'当前输入文本'}).width(150)//宽
height(30)//高
backgroundcolor('#FFF')// 背最色
type(InputType.Password)/输入框类型
TextInput({text:'当前输入文本'})
.width(150)//宽.height(30)// 高
.backgroundColor('#FFF')//背最色
.type(InputType.Password)//输入框类型
.onChange(value =>{value是用户输入的文本内容
})
Button 按钮组件
文字型按钮
Button('点我')
自定义按钮,在Button内嵌套其它组件
Button(){
Image($r('app.media.search')).width(20).margin(10)
}
Button('点我')
.width(10)
.height(30)
.type(ButtonType.Normal)//按钮类型
.onclick(()=>{
处理点击事件
})
Slider 滑动条组件
Slider({min:0,// 最小值
max:100,//最大值
value:40,//当前值
step:10,//滑动步长
style:sliderstyle.0utSet,// InSetdirection:
Axis.Horizontal,//Verticalreverse:falsel/是否反向滑动
})
.width('90%')
.showTips(true)//是否展示value百分比提示
.blockcolor('#36d')
.trackThickness(7)//滑动圆的大小
.showTips(true)//汽包
.onchange(value => {/ value就是当前滑块值
})
线性布局 (Row/Column)
这个和android的线性布局效果一样,更相前端的24珊格
循环控制
这个玩意不会滚动
List组件
1.先声明要展示的数组
2.list里面包一个foreach循环, foreach循环声明的数组对象。
3.foreach循环里面要包一个list的item,item里面包的是需显示的组件。
自定义组件
1.组件封装在再引用 。(当前页面的外部和内部的封装也可以在其它文化中封装)
2.业务函数的封装再引用。
3.样式的封装再引用。