鸿蒙学习（二）

1、弹窗

1. 显示提示信息或者用于用户交互

2. 导入模块 prompt

3. 接口

   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、走马灯（实现轮播图效果）

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

2. 用法

   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、注解

1. @Extend

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

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

2. @Styles

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

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

3. @Builder

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

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

####4、搜索框

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

2. 接口：

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

   placeholder:无输入时的提示文本

   icon:设置搜索图标路径

3. 属性：

   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、多选框、单选框

1. Checkbox:提供多选框组件

2. 接口

   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

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

   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

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

2. 接口：

   isCountDown:是否倒计时

   count:倒计时时间

   controller:TextTImer控制器

3. 属性：

   format:自定义格式

4. 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

1. 日期选择器组件，创建日期滑动选择器

2. 属性：lunar:日期是否显示农历

3. 接口：

   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%')}