一、整体样式:
二、使用线性布局构建出整体框架
应为整个页面是从上到下排列所以使用Column布局作为最外层框架
@Entry
@Component
struct aaa{
build() {
Column() {
}
.width('100%')//设置整个页面的宽
.height('100%')//设置整个页面的高
}
}
@Entry
@Component
struct aaa{
@State imgWidth:number=100
build() {
Column() {
Column(){
//放图片
}
.justifyContent(FlexAlign.Center)//图片主轴上居中
.width('100%')//
.height(300)
Row(){
//放text组件和textinput组件
}
.width('90%')
.height(50)
.justifyContent(FlexAlign.SpaceEvenly)//平均分配每一个元素位置
}
.width('100%')
.height('100%')
}
}
三、在框架中添加组件
image组件
1.参数:
1.1 src 图片的数据源,支持本地图片和网络图片
1.1.1 图片在media文件下 Image($r('app.media.img')) img图片名字
1.1.2 在rawfile下 Image($rawfile('snap')) snap图片名字
2.专属属性:
2.1 alt 加载时显示的占位图,支持本地图片(png、jpg、bmp、svg和gif类型),不支持网络图片。默认值:null
2.2 objectFit 设置图片的填充效果。默认值:ImageFit.Cover
2.3 objectRepeat 设置图片的重复样式。从中心点向两边重复,剩余空间不足放下一张图片时会截断。默认值:ImageRepeat.NoRepeat
2.4 interpolation 设置图片的插值效果,即减轻低清晰度图片在放大显示时出现的锯齿问题。默认值:ImageInterpolation.None
2.4.1 None 不使用图片插值。
2.4.2 High 高图片插值,插值质量最高,可能会影响图片渲染的速度。
2.4.3 Medium 中图片插值。
2.4.4 Low 低图片插值。
2.5 sourceSize 设置图片解码尺寸,降低图片的分辨率,常用于需要让图片显示尺寸比组件尺寸更小的场景。和ImageFit.None配合使用时可在组件内显示小图。单位:px
2.6 fillColor 设置填充颜色,设置后填充颜色会覆盖在图片上。
2.7 autoResize 设置图片解码过程中是否对图源自动缩放。设置为true时,组件会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。如原图大小为1920x1080,而显示区域大小为200x200,则图片会自动解码到200x200的尺寸,大幅度节省图片占用的内存。默认值:true
2.8 copyOption 设置图片是否可复制。当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。默认值:CopyOptions.None
3.实操
给图片设置一个宽,应为图片的大小是变化的,所以宽不是一个固定值,是一个变量。在build的外面设置一个叫imgWidth的变量,类型是number,初始值是100。并把图片的宽绑定给imgWidth,imgWidth是一个可以被改变的变量,改变imgWidth的值必须用this引用。
@Entry
@Component
struct aaa{
@State imgWidth:number=100//创建一个可以被改变的值,初始值为100
build() {
Column() {
Column(){
Image($r('app.media.icon'))
.width(this.imgWidth)//给图片设置宽,并绑定imgWidth
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(300)
Row(){
}
.width('90%')
.height(50)
.justifyContent(FlexAlign.SpaceEvenly)
}
.width('100%')
.height('100%')
}
}
Text组件
1.参数:Text(content?: string | Resource)
content 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。
2.属性:
2.1 textAlig 设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start
2.1.1 Start 水平对齐首部。
2.1.2 Center 水平居中对齐。
2.1.3 End 水平对齐尾部。
2.2 textOverflow 设置文本超长时的显示方式。默认值:{overflow: TextOverflow.Clip}
2.2.1 Clip 文本超长时进行裁剪显示。
2.2.2 Ellipsis 文本超长时显示不下的文本用省略号代替。
2.2.3 None 文本超长时不进行裁剪。
2.3 maxLines 设置文本的最大行数。
2.4 lineHeight 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。
2.5 decoration 设置文本装饰线样式及其颜色。默认值:{type: TextDecorationType.None, color:Color.Black}
2.5.1 TextDecorationType
2.5.1.1 Underline 文字下划线修饰。
2.5.1.2 LineThrough 穿过文本的修饰线。
2.5.1.3 文字上划线修饰。
2.5.1.4 不使用文本装饰线。
2.5.2 color
2.5.2.1 Color 颜色枚举值。
2.5.2.2 number HEX格式颜色,支持rgb。示例:0xffffff。
2.5.2.3 string rgb或者rgba格式颜色。示例:'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
2.5.2.4 Resource 使用引入资源的方式,引入系统资源或者应用资源中的颜色。
3.事件:
onChange(callback: (value: string) => void) 输入内容发生变化时,触发该回调。value:输入的文本内容。触发该事件的条件:1、键盘输入。2、粘贴、剪切。3、键盘快捷键Ctrl+v。
4.实操
@Entry
@Component
struct aaa{
@State imgWidth:number=100
build() {
Column() {
Column(){
Image($r('app.media.icon'))
.width(this.imgWidth)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(300)
Row(){
Text('图片尺寸:')
TextInput({text:'100' })
.width(130)//设置宽
.type(InputType.Number)//只能输入数字,不能输入其他字符
.onChange((value)=>{//添加事件,获取输入的值,value:输入的文本内容
console.log(value+'')//在日志中查看有没有获取到输入的值,+'' 把value的类型变成字符串
this.imgWidth=parseInt(value)//把获取到的值赋值给imgWidth,parseInt:把字符串转化成number类型
})
}
.width('90%')
.height(50)
.justifyContent(FlexAlign.SpaceEvenly)
}
.width('100%')
.height('100%')
}
}
Slider组件
1.参数:
1.1 value 当前进度值,默认值:参数min
1.2 min 设置最小值。默认值:0
1.3 max 设置最大值。默认值:100
1.4 step 设置Slider滑动步长。默认值:1取值范围:[0.01, max]
1.5 style 设置Slider的滑块与滑轨显示样式。默认值:SliderStyle.OutSet
1.6 direction 设置滑动条滑动方向为水平或竖直方向。默认值:Axis.Horizontal
1.7 reverse 设置滑动条取值范围是否反向,横向Slider默认为从左往右滑动,竖向Slider默认为从上往下滑动。默认值:false
2.专属属性:
2.1 blockColor 设置滑块的颜色
2.2 trackColor 设置滑轨的背景颜色
2.3 selectedColor 设置滑轨的已滑动部分颜色
2.4 showSteps 设置当前是否显示步长刻度值 默认值:false
2.5 showTips 设置滑动时是否显示百分比气泡提示。默认值:false
2.6 trackThickness 设置滑轨的粗细。
3.事件:
onChange(callback: (value: number, mode: SliderChangeMode) => void) Slider滑动时触发事件回调。value:当前滑动进度值。若返回值有小数,可使用number.toFixed()方法将数据处理为预期的精度。mode:拖动状态。
4.实操
@Entry
@Component
struct aaa{
@State imgWidth:number=100
build() {
Column() {
Column(){
Image($r('app.media.icon'))
.width(this.imgWidth)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(300)
Row(){
Text('图片尺寸:')
TextInput({text:'100' })
.width(130)
.type(InputType.Number)
.onChange((value)=>{
console.log(value+'')
this.imgWidth=parseInt(value)
})
}
.width('90%')
.height(50)
.justifyContent(FlexAlign.SpaceEvenly)
Divider()//分割线,分隔器组件,分隔不同内容块/内容元素
.width('70%')//宽
.strokeWidth(3)//分割线宽度
Slider({value:100,max:300,style: SliderStyle.InSet})//value:当前进度值,max:滑块最大值,style: SliderStyle.InSet:滑块在滑轨内。
.width('80%')//滑块宽
.margin(30)//滑块距离包裹它的边框距离
.showTips(true)//显示百分比
.onChange((value)=>{//滑动时触发事件回调。
this.imgWidth=value//把滑块的值赋值给imgWidth,value:当前滑动进度值
console.log(value.toString())//在日志中查看有没有获取到滑块的值,toString():把获取到的值变成字符串类型
})
}
.width('100%')
.height('100%')
}
}