鸿蒙学习（二）

文章目录

- - - 1、弹窗
    - 2、走马灯（实现轮播图效果）
    - 3、注解
    - 6、多选框、单选框
    - 7、Stack
    - 8、TextTimer
    - 9、DatePicker

1、弹窗

显示提示信息或者用于用户交互
导入模块 prompt

接口

showToast:显示toast

showDialog:显示对话框

showContextMenu:显示上下文菜单

showLoading:显示loading 提示框

hideLoading:关闭loading提示框

//showToast用法：用于显示提示信息
Button("reset").backgroundColor("#A0CFFF").fontColor(Color.White).fontSize(25).onClick(()=>{prompt.showToast({message:"nihao",duration:10000,/*image:* gravity:'center'*/})})

//showDialog :用于信息交互Button().backgroundColor("#A0CFFF").fontColor(Color.White).fontSize(25).onClick(()=>{prompt.showDialog({title:'title',message:'message',buttons:[{text:'sure',color:'#33dd44'},{text:'no',color:'#33dd44'}]})}).height(500)}

2、走马灯（实现轮播图效果）

Swipper组件：滑块视图容器，子组件滑动轮播

用法

Swiper(){ForEach(this.swiperList,(item,index)=>{Image(item)})}//自动播放.autoPlay(true)//自动播放时间间隔.interval(8000).backgroundColor(Color.Black)//指示点.indicator(true)//指示点样式.indicatorStyle({top:45,left:0,size:50,color:Color.Yellow,selectedColor:Color.Green})}.height('100%').width('100%')

3、注解

@Extend

封装某个组件：调用方式 .

@Extend(Text)
function textStyle(){.fontSize(50).fontColor('#ff6700')
}
//.textStyle

@Styles

封装公共组件，调用方式： .

@Styles
function comStyle(){.width('200').height('200').shadow({radius:20,color:Color.Blue,offsetX:-10,offsetY:-10})
}
//.comStyle

@Builder

封装组件的内容和样式：调用方式this.

  @BuilderButtomCom(name:string){Button(name).width(200)
}
//this.ButtomCom('登录')

####4、搜索框

Search：搜索框组件，适用于浏览器的搜索输入内容输入框等应用场景
接口：

value:当前显示的文本搜索内容

placeholder:无输入时的提示文本

icon:设置搜索图标路径
属性：

searchButton:搜索框末尾搜索按钮文本内容

placeholderColor:placeholder文本颜色

placeholderFont:placeholder文本样式

textTont:搜索框内文本样式

textAlign:搜索框对齐方式

copyOption:输入文本是否可复制
```
 Search({placeholder:'请输入城市名称',value:this.searchcontent,icon:"",}).searchButton("查询").height(40).textFont({size:25,weight:400})
```

####5、HttpRequest 请求

用法：

let httpRequest=http.createHttp()httpRequest.request(//url"http://apis.juhe.cn/simpleWeather/query?key=c06ff16464ae3abf6a8aabac50cafe6a&city="+value,{method:http.RequestMethod.GET,header:{'Content-Type':'application/json'}},(err,data)=>{console.log(data.result.toString())})

6、多选框、单选框

Checkbox:提供多选框组件
接口

name:多选框名称

group:多选框群组名称

用法：

CheckboxGroup({group:"hobbys"}).selectAll(true).onChange((itemName:CheckboxGroupResult)=>{console.log(""+JSON.stringify(itemName))})Checkbox({name:"hobby",group:"hobbys"}).select(true).selectedColor(Color.Orange)Checkbox({name:"hobby",group:"hobbys"}).selectedColor(Color.Brown)

7、Stack

堆叠容器，子组件按照先后顺序依次退爹，覆盖前一个子组件

Stack(){Image('timer01.jpg').height(300)TextTimer({ isCountDown: false,  controller: this.textTimerController }).format(this.format).fontColor(Color.Black).fontSize(40)//.position({x:400,y:400}).onTimer((utc: number, elapsedTime: number) => {console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)})}

8、TextTimer

通过文本显示及时信息并控制计时器状态的组件
接口：

isCountDown:是否倒计时

count:倒计时时间

controller:TextTImer控制器
属性：

format:自定义格式

TextTimerController

start():计时开始

pause():计时暂停

reset():重置计时器

Row() {Button("start").onClick(() => {this.textTimerController.start()})Button("pause").onClick(() => {this.textTimerController.pause()})Button("reset").onClick(() => {this.textTimerController.reset()})}

9、DatePicker

日期选择器组件，创建日期滑动选择器
属性：lunar:日期是否显示农历

接口：

start:指定选择日期的起始日期

end:结束日期

selected:设置选中项日期

 build() {Column() {Button('切换公历农历').margin({ top: 30, bottom: 30 }).onClick(() => {this.isLunar = !this.isLunar})DatePicker({start: new Date('1970-1-1'),end: new Date('2100-1-1'),selected: this.selectedDate}).lunar(this.isLunar).onChange((value: DatePickerResult) => {this.selectedDate.setFullYear(value.year, value.month, value.day)console.info('select current date is: ' + JSON.stringify(value))})}.width('100%')}