鸿蒙学习（二）

文章目录

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

  @Builder
  ButtomCom(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%')
  }