十七、组件-基础组件-Button、checkbox、Datepicker、navigation

Button

按钮组件，可快速创建不同样式的按钮。

方法1：Button(options?:{type?:ButtonType,stateEffect?:boolean})

方法2：Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})
使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

 案例代码：

@Entry
@Component
struct ButtonDemo {

  build() {
    Column({space:10}) {
      Row(){
        Button({type:ButtonType.Normal,stateEffect:true}){
          Row(){
            LoadingProgress().width(20).height(20).color(Color.White)
            Text('按钮').fontSize(26).fontColor('#fff')
          }
        }
        .backgroundColor(Color.Gray).opacity(0.4)
        
        //使用文本内容创建相应的按钮组件，此时Button无法包含子组件。
        Button('小按钮',{type:ButtonType.Normal,stateEffect:false})

      }
    }
    .margin(20)
  }
}

 Checkbox

提供多选框组件，通常用于某选项的打开或关闭

Checkbox(options?:{name?:string,group?:string})

案例代码：

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * Checkbox组件的使用
 */
@Entry
@Component
struct CheckboxDemo {
  build() {
    Column({space:10}){
      Column(){
        Text('Checkbox:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Row(){
          Checkbox({name:'man'})
            .onChange((value) => {
                console.log('man value<<<' + value)
            })
          Text('男').fontSize(25).fontColor(0x3E3E3E)
          Checkbox({name:'woman'})
            .onChange((value) => {
              console.log('woman value<<<' + value)
            })
          Text('女').fontSize(25).fontColor(0x3E3E3E)
        }
      }

      Column({space:10}){
        Text('checkbox group:').fontSize(26).fontColor(0x3E3E3E).width('90%')
        Row(){
          //只有“全选”才使用CheckboxGroup
          CheckboxGroup({group:'checkbox'})
          Text('select all').fontSize(26).fontColor(0x3E3E3E)
        }
        Row(){
          Checkbox({group:'checkbox'})
          Text('1').fontSize(26).fontColor(0x3E3E3E)
        }
        Row(){
          Checkbox({group:'checkbox'})
          Text('2').fontSize(26).fontColor(0x3E3E3E)
        }
        Row(){
          Checkbox({group:'checkbox'})
          Text('3').fontSize(26).fontColor(0x3E3E3E)
        }
      }
    }
  }
}

 Datepicker

日期选择组件，用于根据指定日期范围创建日期滑动选择器。

// 根据指定范围的date创建可以选择日期的滑动选择器

DatePicker(option?:{start?:Date,end?:Date,selected?:Date})

// 选择日期时触发该事件

onChange(callback:(value:DatePickerResult) => void)

 案例代码：

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * DatePicker 时间选择器组件
 */
@Entry
@Component
struct DatePickerDemo {
  @State isLunar: boolean = true
  selectedDate: Date = new Date('2023-11-28')
  build() {
    Column({space:10}) {
      Button('切换 阳历/阴历').margin(20)
        .onClick(() => {
            this.isLunar = !this.isLunar
        })
      DatePicker({selected:this.selectedDate})
        .lunar(this.isLunar)
        .onChange((value) => {
            //月份是从0开始
          console.log(JSON.stringify(value))
          this.selectedDate.setFullYear(value.year,value.month,value.day)
        })
    }
  }
}

navigation

一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * navigation 组件
 */
import InputMethodExtensionContext from '@ohos.InputMethodExtensionContext'
@Entry
@Component
struct NavigationDemo {
  @State cIndex: number = 0
  @State bars: Array<{text:string,subtitle:string,num:number,img:Resource,content:Resource}> =[
    {
      text:'点赞',
      subtitle:'又细又长',
      num:0,
      img:$r('app.media.icon'),
      content:$r('app.media.icon')
    },
    {
      text:'投币',
      subtitle:'全网最新',
      num:1,
      img:$r('app.media.icon'),
      content:$r('app.media.icon')
    },
    {
      text:'收藏',
      subtitle:'求三连',
      num:2,
      img:$r('app.media.icon'),
      content:$r('app.media.icon')
    }
  ]


  build() {
    Column() {
        Navigation()
        {
          Image(this.bars[this.cIndex].content).width('90%')
        }
          .title(this.NavigationTitle())
          .hideTitleBar(false)
          .toolBar(this.NavigationToolbar())
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F1F1')
  }


  @Builder NavigationTitle(){
    Column({space:10}) {
        Text(this.bars[this.cIndex].text).fontSize(26).fontColor(0x3E3E3E)
        Text(this.bars[this.cIndex].subtitle).fontSize(14).fontColor(0x3E3E3E)
    }
  }
  @Builder NavigationToolbar(){
    Row(){
      ForEach(this.bars,item=>{
        Column() {
          Image(item.img).width(50).height(50)
            .border(
                this.cIndex === item.num ? {width:2,color:'#aaaaaa'}:{width:0}
            )
          Text(item.text).fontSize(26).fontColor(
            this.cIndex === item.num ? Color.Blue : 0x3E3E3E
          )
        }
        .height(160)
        .width(130)
        .onClick(() => {
            console.log(item.num)
            this.cIndex = item.num
        })
      })
    }
  }

}